@ebrains/react 2.3.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/color-primary-palette_6.entry.esm.js +106 -106
- package/components-section.entry.esm.js +18 -11
- package/correct-use-of-colors.entry.esm.js +33 -33
- package/docs-palettes.entry.esm.js +1 -1
- package/docs-tokens.entry.esm.js +1 -1
- package/{eds-accordion_36.entry.esm.js → eds-accordion_37.entry.esm.js} +117 -64
- package/eds-app-root.entry.esm.js +4 -4
- package/eds-card-desc_2.entry.esm.js +4 -4
- package/eds-card-generic.entry.esm.js +2 -2
- package/eds-card-project.entry.esm.js +10 -10
- package/eds-card-section.entry.esm.js +2 -2
- package/eds-card-tags.entry.esm.js +1 -1
- package/eds-card-tool.entry.esm.js +4 -4
- package/eds-cookies-preference.entry.esm.js +2 -2
- package/eds-feedback.entry.esm.js +5 -5
- package/eds-footer.entry.esm.js +19 -17
- package/eds-frame.entry.esm.js +4 -4
- package/eds-fullscreen-menu.entry.esm.js +14 -0
- package/eds-gauge.entry.esm.js +4 -4
- package/eds-icon-arrow-diagonal.entry.esm.js +1 -1
- package/eds-icon-arrow-right.entry.esm.js +1 -1
- package/eds-icon-bin.entry.esm.js +1 -1
- package/eds-icon-bluesky.entry.esm.js +1 -1
- package/eds-icon-bookmark.entry.esm.js +1 -1
- package/eds-icon-chevron-down.entry.esm.js +1 -1
- package/eds-icon-chevron-left.entry.esm.js +1 -1
- package/eds-icon-chevron-right.entry.esm.js +1 -1
- package/eds-icon-chevron-up.entry.esm.js +1 -1
- package/eds-icon-clone.entry.esm.js +1 -1
- package/eds-icon-close.entry.esm.js +1 -1
- package/eds-icon-copy.entry.esm.js +1 -1
- package/eds-icon-download.entry.esm.js +1 -1
- package/eds-icon-draft.entry.esm.js +1 -1
- package/eds-icon-edit.entry.esm.js +1 -1
- package/eds-icon-eu.entry.esm.js +1 -1
- package/eds-icon-external.entry.esm.js +1 -1
- package/eds-icon-facebook.entry.esm.js +1 -1
- package/eds-icon-gitlab.entry.esm.js +1 -1
- package/eds-icon-linkedin.entry.esm.js +1 -1
- package/eds-icon-loader.entry.esm.js +1 -1
- package/eds-icon-mastodon.entry.esm.js +1 -1
- package/eds-icon-menu.entry.esm.js +1 -1
- package/eds-icon-minus.entry.esm.js +1 -1
- package/eds-icon-more.entry.esm.js +1 -1
- package/eds-icon-paper.entry.esm.js +1 -1
- package/eds-icon-plus.entry.esm.js +1 -1
- package/eds-icon-portal.entry.esm.js +1 -1
- package/eds-icon-private.entry.esm.js +1 -1
- package/eds-icon-public.entry.esm.js +1 -1
- package/eds-icon-search.entry.esm.js +1 -1
- package/eds-icon-star.entry.esm.js +1 -1
- package/eds-icon-start.entry.esm.js +1 -1
- package/eds-icon-success.entry.esm.js +1 -1
- package/eds-icon-thumbs-down.entry.esm.js +1 -1
- package/eds-icon-thumbs-up.entry.esm.js +1 -1
- package/eds-icon-tutorial.entry.esm.js +1 -1
- package/eds-icon-twitter.entry.esm.js +1 -1
- package/eds-icon-unknown.entry.esm.js +1 -1
- package/eds-icon-updown.entry.esm.js +3 -3
- package/eds-icon-user.entry.esm.js +1 -1
- package/eds-icon-view.entry.esm.js +1 -1
- package/eds-icon-youtube.entry.esm.js +1 -1
- package/eds-modal.entry.esm.js +8 -8
- package/eds-progress-bar.entry.esm.js +4 -4
- package/eds-section-core_2.entry.esm.js +5 -5
- package/eds-social-networks.entry.esm.js +3 -3
- package/eds-timeline.entry.esm.js +4 -4
- package/eds-toast-manager.entry.esm.js +1 -1
- package/eds-trl.entry.esm.js +2 -2
- package/incorrect-use-of-colors.entry.esm.js +8 -8
- package/index.esm.js +1 -1
- package/index.esm2.js +5 -4
- package/logo-space.entry.esm.js +9 -9
- package/logo-variations-horizontal_2.entry.esm.js +28 -28
- package/logo-variations-tabs.entry.esm.js +1 -1
- package/logo-wrong-usage.entry.esm.js +25 -25
- package/package.json +1 -1
- package/src/components.d.ts +1 -0
- package/svg-repository.entry.esm.js +4 -4
- package/token-list_3.entry.esm.js +5 -5
- package/token-ratios.entry.esm.js +3 -3
- package/token-spacing.entry.esm.js +26 -26
- package/token-typography.entry.esm.js +2 -2
- package/{up-and-down-d747abee.esm.js → up-and-down-8b69ca97.esm.js} +2 -2
|
@@ -22,16 +22,16 @@ const edsAccordionCss="blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin
|
|
|
22
22
|
*/disconnectedCallback(){window.removeEventListener('resize',this.setPanelHeight);}/**
|
|
23
23
|
* Renders the accordion structure, including header, content, description, and any slotted content.
|
|
24
24
|
* Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
|
|
25
|
-
*/render(){return h("div",{key:'
|
|
25
|
+
*/render(){return h("div",{key:'095474500f7c60f20e4d737188001d2f3084dbcc',ref:el=>this.wrapperRef=el,class:`flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16
|
|
26
26
|
${this.switchBg&&this.isExpanded?'bg-inverse':'bg-default'}
|
|
27
27
|
${this.switchBg?'hover:bg-inverse':''}
|
|
28
|
-
${this.description?'min-h-56':''}`},h("h3",{key:'
|
|
28
|
+
${this.description?'min-h-56':''}`},h("h3",{key:'f090fbe3632df8302046f1178e82b8affc4cc821',ref:el=>this.headerRef=el,class:"mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40"},this.heading),h("div",{key:'0a30ab8c27cadbb342fc57f6393111c84f10a664',class:"ml-auto"},h("eds-button",{key:'01f4658df8181b63b71a2e0d2a67e8f8b58efbb7',id:"toggleAccordion",intent:this.buttonIntent,"aria-expanded":this.isExpanded||this.shortContent,"aria-label":"Toggle accordion","aria-controls":"accordionSection",class:`effect-color flex w-full items-center justify-between rounded-md`,onClick:this.handleClick,icon:"chevron-down"})),h("div",{key:'9f3b5a0e425c2dffe3b6fe40fa33b020d64256d8',class:`w-full`,style:Number.isFinite(this.headerHeight)?{marginTop:`${this.headerHeight}px`}:{}},this.description?h("span",{class:`text-light ${!this.isExpanded&&this.clampText?'line-clamp-1':''}`},this.description):null,h("section",{key:'414735d7d982de76d8a1b8db24aa9a569eba37c7',id:"accordionSection","aria-labelledby":"accordionHeader","aria-hidden":!this.isExpanded,class:`z-1 effect-height relative h-0 w-full ${!this.isExpanded?'overflow-hidden':''}`,style:{height:this.isExpanded?'auto':'0'}},h("div",{key:'11097a0646b18f728af494c14aa4cc0e5335defe',ref:el=>this.childContentRef=el,class:`accordion-content effect-color pt-4`,"aria-hidden":!this.isExpanded},h("span",{key:'88414c40490aa77166d23868f16556b9356279a7',class:`${!this.isExpanded&&this.clampText?'line-clamp-2':''}`},h("slot",{key:'8070a7676ca8fba065f813852a2e0cf4146f3374'}))))));}get el(){return getElement(this);}};EdsAccordion.style=EdsAccordionStyle0;const edsAlertCss="*,\n::before,\n::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: currentColor;\n}\n\np {\n margin: 0;\n}\n\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.flex {\n display: flex;\n}\n\n.w-full {\n width: 100%;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-x-12 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n\n.space-y-12> :not([hidden])~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n\n.rounded-lg {\n border-radius: 16px;\n}\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-error {\n background-color: var(--red-200);\n}\n\n.bg-success {\n background-color: var(--green-200);\n}\n\n.bg-warning {\n background-color: var(--yellow-200);\n}\n\n.p-16 {\n padding: 1rem;\n}\n\n.p-20 {\n padding: 1.25rem;\n}\n\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-20 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-12 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.py-20 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.pr-12 {\n padding-right: 0.75rem;\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n[class*=underline-] {\n text-decoration-line: underline;\n}\n\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05);\n}";const EdsAlertStyle0=edsAlertCss;const alertStyles=cva(['w-full bg-dark'],{variants:{intent:{default:'',warning:'bg-warning',error:'bg-error',success:'bg-success'},brd:{rounded:'rounded-lg border-inside after:border-softest after:rounded-lg',normal:''},direction:{vertical:'space-y-12',horizontal:'flex flex-row items-center justify-between gap-x-12'},withBtn:{false:'',true:''}},compoundVariants:[{direction:'horizontal',withBtn:true,class:'px-20 pr-12 py-12'},{direction:'horizontal',withBtn:false,class:'p-20'},{direction:'vertical',withBtn:true,class:'p-16'},{direction:'vertical',withBtn:false,class:'px-12 py-20'}],defaultVariants:{intent:'default',brd:'rounded',direction:'horizontal'}});const EdsAlert=class{constructor(hostRef){registerInstance(this,hostRef);this.edsalert=createEvent(this,"edsalert",7);this.message=undefined;this.pressableLabel=undefined;this.pressableUrl=undefined;this.direction='horizontal';this.intent='default';this.brd='rounded';this.withBtn=false;}componentWillLoad(){this.withBtn=Boolean(this.pressableLabel);}componentDidLoad(){// Focus the alert container for immediate screen reader announcement
|
|
29
29
|
/*if (this.intent === 'error' || this.intent === 'warning') {
|
|
30
30
|
this.el.shadowRoot?.querySelector('[role="alert"]')?.setAttribute('tabindex', '-1');
|
|
31
31
|
(this.el.shadowRoot?.querySelector('[role="alert"]') as HTMLElement)?.focus();
|
|
32
32
|
}*/var _a;// Query for the 'eds-link' element inside the shadow root.
|
|
33
33
|
const lnk=(_a=this.el.shadowRoot)===null||_a===void 0?void 0:_a.querySelector('eds-link');if(lnk){this.emitContext(lnk);}}emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});linkElement.dispatchEvent(event);}handleAction(){// Emit the alertAction event for parent components to handle
|
|
34
|
-
this.edsalert.emit();}render(){const ariaLabel=this.intent!=='default'?`${this.intent} alert`:'alert';return h("div",{key:'
|
|
34
|
+
this.edsalert.emit();}render(){const ariaLabel=this.intent!=='default'?`${this.intent} alert`:'alert';return h("div",{key:'d8f0a45ddbaf3d3eb284751e33ddfdce2e13b67a',class:alertStyles({intent:this.intent,brd:this.brd,direction:this.direction,withBtn:this.withBtn}),role:"alert","aria-label":ariaLabel,"aria-live":this.intent==='error'?'assertive':'polite',"aria-labelledby":"alert-message","aria-describedby":this.withBtn?'alert-action':undefined},h("p",{key:'179862c141a2ce05fa9f8562be7e64196baa3922',id:"alert-message",class:"f-ui-01 py-8",innerHTML:this.message}),this.withBtn&&h("div",{key:'3677358bd563a3e2ee1b74309dc4fb6c84ac475f',id:"alert-action"},this.pressableUrl?h("eds-link",{class:"eds-alert-link",label:this.pressableLabel,url:this.pressableUrl,intent:"secondary",external:true}):h("eds-button",{class:"eds-alert-button",label:this.pressableLabel,intent:"secondary",onClick:()=>this.handleAction()})));}get el(){return getElement(this);}};EdsAlert.style=EdsAlertStyle0;const edsAvatarCss="::before,\n::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: currentColor;\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border: 2px solid rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-inverse {\n &::after {\n border: 2px solid rgba(255, 255, 255, 0.3);\n }\n\n &::after {\n content: '';\n }\n}\n\n.aspect-1x1 {\n aspect-ratio: 1/1;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.px-4 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.rounded-pill {\n border-radius: 100px;\n}\n\n.rounded-sm {\n border-radius: 8px;\n}\n\n.rounded-xs {\n border-radius: 4px;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-darker {\n background-color: var(--grey-400);\n}\n\n.bg-stronger {\n background-color: var(--grey-900);\n}\n\n.bg-strongest {\n background-color: var(--black);\n}\n\n.text-accent {\n color: var(--green-500);\n}\n\n.text-default {\n color: var(--black);\n}\n\n.\\!no-underline {\n text-decoration-line: none !important;\n}\n\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.w-32 {\n width: 2rem;\n}\n\n.w-44 {\n width: 2.75rem;\n}\n\n.w-\\[54px\\] {\n width: 54px;\n}\n\n.bg-gradient-01-top {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-01-bottom {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-02-top {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-02-bottom {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-03-top {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-03-bottom {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-04-top {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-04-bottom {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n}";const EdsAvatarStyle0=edsAvatarCss;const EdsAvatar=class{constructor(hostRef){registerInstance(this,hostRef);this.firstName='User';this.lastName='Avatar';this.picture=undefined;this.initials=undefined;this.color='grey';}/**
|
|
35
35
|
* Flag to render the avatar with rounded (pill) shape if `true`.
|
|
36
36
|
*///@Prop() rounded: boolean = false;
|
|
37
37
|
/**
|
|
@@ -47,7 +47,7 @@ this.edsalert.emit();}render(){const ariaLabel=this.intent!=='default'?`${this.i
|
|
|
47
47
|
this.color?'border-inside-inverse':'',this.picture?'':this.color==='grey'?'bg-dark':'bg-strongest text-accent'].join(' ');}/**
|
|
48
48
|
* Renders the avatar component. Displays either an image using `eds-img` or initials depending on whether `picture` or `computedInitials` is set.
|
|
49
49
|
* @returns {JSX.Element} The rendered avatar component.
|
|
50
|
-
*/render(){return h("div",{key:'
|
|
50
|
+
*/render(){return h("div",{key:'7b5bf31c794c9bbddd2976fdd5a273842a75603a',class:this.containerClasses},this.picture?h("eds-img",{src:this.picture,width:54,height:54,sizes:"120px",alt:`${this.firstName} ${this.lastName}`,lazyload:true,withBg:true}):h("abbr",{title:this.computedInitials||`${this.firstName} ${this.lastName}`,class:"!no-underline f-ui-01"},this.computedInitials));}};EdsAvatar.style=EdsAvatarStyle0;const edsBlockBreakCss=".border-softer{border-color:rgba(0, 0, 0, .1)}.border-default{border-color:var(--black)}.my-16{margin-top:1rem;margin-bottom:1rem}.block{display:block}.w-full{width:100%}.border-t-2{border-top-width:2px}";const EdsBlockBreakStyle0=edsBlockBreakCss;const EdsBlockBreak=class{constructor(hostRef){registerInstance(this,hostRef);this.inverse=false;}render(){return h("hr",{key:'dd9b98d66f195135ff2fb1374a56d4c670e43d3e',class:`${this.inverse?'border-default':'border-softer'} my-16 inline-block w-full border-t-2`});}};EdsBlockBreak.style=EdsBlockBreakStyle0;const edsBreadcrumbCss="blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.125rem * var(--tw-space-x-reverse));margin-left:calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))}.px-2{padding-left:0.125rem;padding-right:0.125rem}.w-20{width:1.25rem}.w-28{width:1.75rem}.w-32{width:2rem}.w-44{width:2.75rem}.h-20{height:1.25rem}.h-24{height:1.5rem}.h-28{height:1.75rem}.h-32{height:2rem}@media (min-width: 750px){.md\\:block{display:block}}";const EdsBreadcrumbStyle0=edsBreadcrumbCss;const EdsBreadcrumb=class{constructor(hostRef){registerInstance(this,hostRef);/**
|
|
51
51
|
* Updates the maximum number of visible items and tracks if the screen is small.
|
|
52
52
|
*/this.updateScreenSize=()=>{const width=window.innerWidth;if(width<769){this.maxVisibleItems=3;}else if(width<=1024){this.maxVisibleItems=3;}else if(width<=1280){this.maxVisibleItems=3;}else if(width<=2200){this.maxVisibleItems=4;}else {this.maxVisibleItems=6;}};this.items=[];this.intent='ghost';this.parsedItems=[];this.isSmallScreen=false;this.maxVisibleItems=6;}/**
|
|
53
53
|
* Watches for changes to the `items` prop and parses it.
|
|
@@ -73,12 +73,12 @@ this.color?'border-inside-inverse':'',this.picture?'':this.color==='grey'?'bg-da
|
|
|
73
73
|
* Render method for the breadcrumb component.
|
|
74
74
|
* It creates a navigation element with an ordered list of breadcrumb links.
|
|
75
75
|
* The last link is marked as the current page.
|
|
76
|
-
*/render(){const itemsToRender=this.getTruncatedItems();return h("nav",{key:'27ddf744a07f1b697e549cdc6d2a66f65ebe6386',"aria-label":"Breadcrumb"},h("ol",{key:'43ac089290c0a6f9b3c5cd629def8540966637b8',class:"flex items-center space-x-2"},itemsToRender.map((item,index)=>{const isLast=index===itemsToRender.length-1;return h("li",{class:"flex items-center"},!item.isHidden?(()=>{const{fullLabel}=this.getLabels(item,isLast);const linkIntent=isLast?this.intent==='strong'?'weak':this.intent==='weak'?'strong':this.intent:this.intent;return h("eds-link",Object.assign({label:fullLabel,url:item.url,intent:linkIntent,disabled:isLast,current:isLast,"aria-label":fullLabel,size:"small","icon-small":"false"},isLast?{'aria-current':'page'}:{}));})():h("eds-link",{label:"...",url:"#",intent:"strong",current:false,"aria-label":"...",size:"small","icon-small":"false",icon:"chevron-right"}),!isLast&&!item.isHidden&&h("eds-icon-wrapper",{icon:"chevron-right",class:"w-20 h-20"}));})));}get el(){return getElement(this);}static get watchers(){return {"items":["parseItems"]};}};EdsBreadcrumb.style=EdsBreadcrumbStyle0;const edsButtonCss="*,\n::before,\n::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: currentColor;\n}\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\n 1. Change the font styles in all browsers.\n 2. Remove the margin in Firefox and Safari.\n 3. Remove default padding in all browsers.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-size: 100%;\n font-weight: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n color: inherit;\n margin: 0;\n padding: 0;\n}\n\n/*\n Remove the inheritance of text transform in Edge and Firefox.\n */\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n 1. Correct the inability to style clickable types in iOS and Safari.\n 2. Remove default button styles.\n */\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button;\n /* 1 */\n background-color: transparent;\n /* 2 */\n background-image: none;\n /* 2 */\n}\n\np {\n margin: 0;\n}\n\n/*\n Set the default cursor for buttons.\n */\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\n Make sure disabled buttons don't get the pointer cursor.\n */\n:disabled {\n cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n\n.f-body-01 {\n font-family: var(--f-body-01-fontFamily);\n font-weight: var(--f-body-01-fontWeight);\n font-size: var(--f-body-01-fontSize);\n line-height: var(--f-body-01-lineHeight);\n letter-spacing: var(--f-body-01-letterSpacing);\n}\n\n.f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n\n &::after {\n content: '';\n }\n}\n\n.loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n}\n\n/** region TRANSITIONS */\n.effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus:focus-visible {\n outline-style: solid;\n}\n\n.effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus-within:focus-within {\n outline-style: solid;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.sticky {\n position: sticky;\n}\n\n.inset-0 {\n inset: 0rem;\n}\n\n.inset-x-16 {\n left: 1rem;\n right: 1rem;\n}\n\n.-top-8 {\n top: -0.5rem;\n}\n\n.left-0 {\n left: 0rem;\n}\n\n.left-1\\/2 {\n left: 50%;\n}\n\n.left-4 {\n left: 0.25rem;\n}\n\n.left-\\[4px\\] {\n left: 4px;\n}\n\n.right-0 {\n right: 0rem;\n}\n\n.right-4 {\n right: 0.25rem;\n}\n\n.right-8 {\n right: 0.5rem;\n}\n\n.right-\\[6px\\] {\n right: 6px;\n}\n\n.top-0 {\n top: 0rem;\n}\n\n.top-1\\/2 {\n top: 50%;\n}\n\n.m-0 {\n margin: 0rem;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.-ml-16 {\n margin-left: -1rem;\n}\n\n.-mr-16 {\n margin-right: -1rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.ml-4 {\n margin-left: 0.25rem;\n}\n\n.ml-64 {\n margin-left: 4rem;\n}\n\n.ml-8 {\n margin-left: 0.5rem;\n}\n\n.ml-auto {\n margin-left: auto;\n}\n\n.mr-4 {\n margin-right: 0.25rem;\n}\n\n.mr-8 {\n margin-right: 0.5rem;\n}\n\n.mr-auto {\n margin-right: auto;\n}\n\n.block {\n display: block;\n}\n\n.\\!block {\n display: block !important;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.inline {\n display: inline;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.hidden {\n display: none;\n}\n\n.h-20 {\n height: 1.25rem;\n}\n\n.h-24 {\n height: 1.5rem;\n}\n\n.h-36 {\n height: 2.25rem;\n}\n\n.h-44 {\n height: 2.75rem;\n}\n\n.h-auto {\n height: auto;\n}\n\n.h-full {\n height: 100%;\n}\n\n.\\!min-h-20 {\n min-height: 1.25rem !important;\n}\n\n.min-h-screen {\n min-height: 100vh;\n}\n\n.w-20 {\n width: 1.25rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.flex-none {\n flex: none;\n}\n\n.grow {\n flex-grow: 1;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.resize {\n resize: both;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.flex-wrap {\n flex-wrap: wrap;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.space-x-2> :not([hidden])~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.overflow-x-auto {\n overflow-x: auto;\n}\n\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n\n.whitespace-nowrap {\n white-space: nowrap;\n}\n\n.break-words {\n overflow-wrap: break-word;\n}\n\n.rounded {\n border-radius: 0.25rem;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.rounded-lg {\n border-radius: 16px;\n}\n\n.rounded-md {\n border-radius: 12px;\n}\n\n.rounded-pill {\n border-radius: 100px;\n}\n\n.rounded-sm {\n border-radius: 8px;\n}\n\n.rounded-xxs {\n border-radius: 2px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#d2d2d2\\] {\n --tw-border-opacity: 1;\n border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n\n.border-softest {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1);\n}\n\n.\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n}\n\n.\\!bg-darker {\n background-color: var(--grey-400) !important;\n}\n\n.\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n}\n\n.bg-accent {\n background-color: var(--green-500);\n}\n\n.bg-accent-dark {\n background-color: var(--green-600);\n}\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-darker {\n background-color: var(--grey-400);\n}\n\n.bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n}\n\n.bg-strong {\n background-color: var(--grey-700);\n}\n\n.bg-strong-dark {\n background-color: var(--grey-800);\n}\n\n.bg-stronger {\n background-color: var(--grey-900);\n}\n\n.bg-strongest {\n background-color: var(--black);\n}\n\n.p-12 {\n padding: 0.75rem;\n}\n\n.p-6 {\n padding: 0.375rem;\n}\n\n.p-8 {\n padding: 0.5rem;\n}\n\n.\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n}\n\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.pl-4 {\n padding-left: 0.25rem;\n}\n\n.pl-8 {\n padding-left: 0.5rem;\n}\n\n.pr-4 {\n padding-right: 0.25rem;\n}\n\n.pr-8 {\n padding-right: 0.5rem;\n}\n\n.\\!text-current {\n color: currentColor !important;\n}\n\n.text-accent {\n color: var(--green-500);\n}\n\n.text-current {\n color: currentColor;\n}\n\n.text-default {\n color: var(--black);\n}\n\n.text-inverse {\n color: var(--white);\n}\n\n.text-lightest {\n color: var(--grey-500);\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.underline-offset-4 {\n text-underline-offset: 0.2em;\n}\n\n.\\@container {\n container-type: inline-size;\n}\n\n.after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n}\n\n.focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n}\n\n.hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n}\n\n.hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n}\n\n.hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n}\n\n.hover\\:bg-default:hover {\n background-color: var(--grey-200);\n}\n\n.hover\\:bg-inverse:hover {\n background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n}\n\n.hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n}\n\n.hover\\:text-default:hover {\n color: var(--black);\n}\n\n.hover\\:text-lighter:hover {\n color: var(--grey-600);\n}\n\n.hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n}\n\n.disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n}\n\n.after\\:absolute::after {\n position: absolute;\n}\n\n.after\\:inset-0::after {\n inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n}\n\n.after\\:bottom-0::after {\n bottom: 0rem;\n}\n\n.after\\:left-16::after {\n left: 1rem;\n}\n\n.after\\:right-16::after {\n right: 1rem;\n}\n\n.after\\:z-10::after {\n z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n}\n\n.after\\:border-accent::after {\n border-color: var(--green-500);\n}\n\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.after\\:opacity-0::after {\n opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n}";const EdsButtonStyle0=edsButtonCss;const EdsButton=class{constructor(hostRef){registerInstance(this,hostRef);this.button=cva(['relative inline-flex items-center','py-8','effect-focus effect-color','cursor-pointer','aria-disabled:text-lightest aria-disabled:bg-dark aria-disabled:cursor-not-allowed','disabled:text-lightest disabled:bg-dark disabled:cursor-not-allowed'],{variants:{intent:{primary:'bg-accent border-inside hover:bg-accent-dark shadow-accent focus:shadow-none aria-disabled:shadow-none',secondary:'border-inside border-inside-inverse text-inverse bg-strongest hover:bg-strong-dark',tertiary:'border-inside after:border-softest bg-dark hover:bg-darker',ghost:'border-inside hover:bg-darker',ghostInverse:'border-inside text-lightest hover:bg-dark'},loading:{true:'pointer-events-none',false:''},iconSmall:{false:'',true:''},size:{small:'h-36 f-ui-02',large:'h-44 f-ui-01'},iconPos:{left:'flex-row-reverse',right:''},iconOnly:{false:'',true:''},pill:{true:'rounded-full border-inside-pill',false:'rounded-sm'}},compoundVariants:[{size:'small',iconOnly:true,class:'p-8'},{size:'large',iconOnly:true,class:'p-12'},{size:'small',iconOnly:false,class:'px-12'},{size:'large',iconOnly:false,class:'px-16'},{iconSmall:true,iconPos:'left',class:'pl-4',iconOnly:false},{iconSmall:true,iconPos:'right',class:'pr-4',iconOnly:false},{iconSmall:true,iconPos:'left',size:'large',class:'pl-8',iconOnly:false},{iconSmall:true,iconPos:'right',size:'large',class:'pr-8',iconOnly:false}],defaultVariants:{intent:'secondary',loading:false,iconSmall:false,iconPos:'right',iconOnly:false,pill:false,size:'small'}});this.parentContext=null;// Accepts the entire event detail or null
|
|
77
|
-
this.label=undefined;this.ariaLabel='Button';this.elementType='button';this.intent='secondary';this.loading=false;this.disabled=false;this.pill=false;this.icon=undefined;this.size='small';this.iconPos='right';this.iconSmall=false;this.
|
|
76
|
+
*/render(){const itemsToRender=this.getTruncatedItems();return h("nav",{key:'4894fb9e6b37ef84880a62f4dcd3289dcb9cab38',"aria-label":"Breadcrumb"},h("ol",{key:'d69405fcee024465d645d9cdbb17189998a94b95',class:"flex items-center space-x-2"},itemsToRender.map((item,index)=>{const isLast=index===itemsToRender.length-1;return h("li",{class:"flex items-center"},!item.isHidden?(()=>{const{fullLabel}=this.getLabels(item,isLast);const linkIntent=isLast?this.intent==='strong'?'weak':this.intent==='weak'?'strong':this.intent:this.intent;return h("eds-link",Object.assign({label:fullLabel,url:item.url,intent:linkIntent,disabled:isLast,current:isLast,"aria-label":fullLabel,size:"small","icon-small":"false"},isLast?{'aria-current':'page'}:{}));})():h("eds-link",{label:"...",url:"#",intent:"strong",current:false,"aria-label":"...",size:"small","icon-small":"false",icon:"chevron-right"}),!isLast&&!item.isHidden&&h("eds-icon-wrapper",{icon:"chevron-right",class:"w-20 h-20"}));})));}get el(){return getElement(this);}static get watchers(){return {"items":["parseItems"]};}};EdsBreadcrumb.style=EdsBreadcrumbStyle0;const edsButtonCss="*,\n::before,\n::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: currentColor;\n}\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\n 1. Change the font styles in all browsers.\n 2. Remove the margin in Firefox and Safari.\n 3. Remove default padding in all browsers.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-size: 100%;\n font-weight: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n color: inherit;\n margin: 0;\n padding: 0;\n}\n\n/*\n Remove the inheritance of text transform in Edge and Firefox.\n */\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n 1. Correct the inability to style clickable types in iOS and Safari.\n 2. Remove default button styles.\n */\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button;\n /* 1 */\n background-color: transparent;\n /* 2 */\n background-image: none;\n /* 2 */\n}\n\np {\n margin: 0;\n}\n\n/*\n Set the default cursor for buttons.\n */\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\n Make sure disabled buttons don't get the pointer cursor.\n */\n:disabled {\n cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n\n.f-body-01 {\n font-family: var(--f-body-01-fontFamily);\n font-weight: var(--f-body-01-fontWeight);\n font-size: var(--f-body-01-fontSize);\n line-height: var(--f-body-01-lineHeight);\n letter-spacing: var(--f-body-01-letterSpacing);\n}\n\n.f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n\n &::after {\n content: '';\n }\n}\n\n.loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n}\n\n/** region TRANSITIONS */\n.effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus:focus-visible {\n outline-style: solid;\n}\n\n.effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus-within:focus-within {\n outline-style: solid;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.sticky {\n position: sticky;\n}\n\n.inset-0 {\n inset: 0rem;\n}\n\n.inset-x-16 {\n left: 1rem;\n right: 1rem;\n}\n\n.-top-8 {\n top: -0.5rem;\n}\n\n.left-0 {\n left: 0rem;\n}\n\n.left-1\\/2 {\n left: 50%;\n}\n\n.left-4 {\n left: 0.25rem;\n}\n\n.left-\\[4px\\] {\n left: 4px;\n}\n\n.right-0 {\n right: 0rem;\n}\n\n.right-4 {\n right: 0.25rem;\n}\n\n.right-8 {\n right: 0.5rem;\n}\n\n.right-\\[6px\\] {\n right: 6px;\n}\n\n.top-0 {\n top: 0rem;\n}\n\n.top-1\\/2 {\n top: 50%;\n}\n\n.m-0 {\n margin: 0rem;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.-ml-16 {\n margin-left: -1rem;\n}\n\n.-mr-16 {\n margin-right: -1rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.ml-4 {\n margin-left: 0.25rem;\n}\n\n.ml-64 {\n margin-left: 4rem;\n}\n\n.ml-8 {\n margin-left: 0.5rem;\n}\n\n.ml-auto {\n margin-left: auto;\n}\n\n.mr-4 {\n margin-right: 0.25rem;\n}\n\n.mr-8 {\n margin-right: 0.5rem;\n}\n\n.mr-auto {\n margin-right: auto;\n}\n\n.block {\n display: block;\n}\n\n.\\!block {\n display: block !important;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.inline {\n display: inline;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.hidden {\n display: none;\n}\n\n.h-20 {\n height: 1.25rem;\n}\n\n.h-24 {\n height: 1.5rem;\n}\n\n.h-36 {\n height: 2.25rem;\n}\n\n.h-44 {\n height: 2.75rem;\n}\n\n.h-auto {\n height: auto;\n}\n\n.h-full {\n height: 100%;\n}\n\n.\\!min-h-20 {\n min-height: 1.25rem !important;\n}\n\n.min-h-screen {\n min-height: 100vh;\n}\n\n.w-20 {\n width: 1.25rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.flex-none {\n flex: none;\n}\n\n.grow {\n flex-grow: 1;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.resize {\n resize: both;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.flex-wrap {\n flex-wrap: wrap;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.space-x-2> :not([hidden])~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.overflow-x-auto {\n overflow-x: auto;\n}\n\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n\n.whitespace-nowrap {\n white-space: nowrap;\n}\n\n.break-words {\n overflow-wrap: break-word;\n}\n\n.rounded {\n border-radius: 0.25rem;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.rounded-lg {\n border-radius: 16px;\n}\n\n.rounded-md {\n border-radius: 12px;\n}\n\n.rounded-pill {\n border-radius: 100px;\n}\n\n.rounded-sm {\n border-radius: 8px;\n}\n\n.rounded-xxs {\n border-radius: 2px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#d2d2d2\\] {\n --tw-border-opacity: 1;\n border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n\n.border-softest {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1);\n}\n\n.\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n}\n\n.\\!bg-darker {\n background-color: var(--grey-400) !important;\n}\n\n.\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n}\n\n.bg-accent {\n background-color: var(--green-500);\n}\n\n.bg-accent-dark {\n background-color: var(--green-600);\n}\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-darker {\n background-color: var(--grey-400);\n}\n\n.bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n}\n\n.bg-strong {\n background-color: var(--grey-700);\n}\n\n.bg-strong-dark {\n background-color: var(--grey-800);\n}\n\n.bg-stronger {\n background-color: var(--grey-900);\n}\n\n.bg-strongest {\n background-color: var(--black);\n}\n\n.p-12 {\n padding: 0.75rem;\n}\n\n.p-6 {\n padding: 0.375rem;\n}\n\n.p-8 {\n padding: 0.5rem;\n}\n\n.\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n}\n\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.pl-4 {\n padding-left: 0.25rem;\n}\n\n.pl-8 {\n padding-left: 0.5rem;\n}\n\n.pr-4 {\n padding-right: 0.25rem;\n}\n\n.pr-8 {\n padding-right: 0.5rem;\n}\n\n.\\!text-current {\n color: currentColor !important;\n}\n\n.text-accent {\n color: var(--green-500);\n}\n\n.text-current {\n color: currentColor;\n}\n\n.text-default {\n color: var(--black);\n}\n\n.text-inverse {\n color: var(--white);\n}\n\n.text-lightest {\n color: var(--grey-500);\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.underline-offset-4 {\n text-underline-offset: 0.2em;\n}\n\n.\\@container {\n container-type: inline-size;\n}\n\n.after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n}\n\n.focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n}\n\n.hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n}\n\n.hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n}\n\n.hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n}\n\n.hover\\:bg-default:hover {\n background-color: var(--grey-200);\n}\n\n.hover\\:bg-inverse:hover {\n background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n}\n\n.hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n}\n\n.hover\\:text-default:hover {\n color: var(--black);\n}\n\n.hover\\:text-lighter:hover {\n color: var(--grey-600);\n}\n\n.hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n}\n\n.disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n}\n\n.after\\:absolute::after {\n position: absolute;\n}\n\n.after\\:inset-0::after {\n inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n}\n\n.after\\:bottom-0::after {\n bottom: 0rem;\n}\n\n.after\\:left-16::after {\n left: 1rem;\n}\n\n.after\\:right-16::after {\n right: 1rem;\n}\n\n.after\\:z-10::after {\n z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n}\n\n.after\\:border-accent::after {\n border-color: var(--green-500);\n}\n\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.after\\:opacity-0::after {\n opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n}";const EdsButtonStyle0=edsButtonCss;const EdsButton=class{constructor(hostRef){registerInstance(this,hostRef);this.button=cva(['relative inline-flex items-center','py-8','effect-focus effect-color','cursor-pointer','aria-disabled:text-lightest aria-disabled:bg-dark aria-disabled:cursor-not-allowed','disabled:text-lightest disabled:bg-dark disabled:cursor-not-allowed'],{variants:{intent:{primary:'bg-accent border-inside hover:bg-accent-dark shadow-accent focus:shadow-none aria-disabled:shadow-none',secondary:'border-inside border-inside-inverse text-inverse bg-strongest hover:bg-strong-dark',tertiary:'border-inside after:border-softest bg-dark hover:bg-darker',ghost:'border-inside hover:bg-darker',ghostInverse:'border-inside text-lightest hover:bg-dark'},loading:{true:'pointer-events-none',false:''},iconSmall:{false:'',true:''},size:{small:'h-36 f-ui-02',large:'h-44 f-ui-01'},iconPos:{left:'flex-row-reverse',right:''},iconOnly:{false:'',true:''},pill:{true:'rounded-full border-inside-pill',false:'rounded-sm'}},compoundVariants:[{size:'small',iconOnly:true,class:'p-8'},{size:'large',iconOnly:true,class:'p-12'},{size:'small',iconOnly:false,class:'px-12'},{size:'large',iconOnly:false,class:'px-16'},{iconSmall:true,iconPos:'left',class:'pl-4',iconOnly:false},{iconSmall:true,iconPos:'right',class:'pr-4',iconOnly:false},{iconSmall:true,iconPos:'left',size:'large',class:'pl-8',iconOnly:false},{iconSmall:true,iconPos:'right',size:'large',class:'pr-8',iconOnly:false}],defaultVariants:{intent:'secondary',loading:false,iconSmall:false,iconPos:'right',iconOnly:false,pill:false,size:'small'}});this.parentContext=null;// Accepts the entire event detail or null
|
|
77
|
+
this.label=undefined;this.ariaLabel='Button';this.elementType='button';this.intent='secondary';this.loading=false;this.disabled=false;this.pill=false;this.icon=undefined;this.size='small';this.iconPos='right';this.iconSmall=false;this.triggerClick=undefined;}handleParentContext(event){if(event.target!==this.el){// Ignore the event if it's not targeted at this specific instance
|
|
78
78
|
return;}this.parentContext=event.detail;event.stopPropagation();}handleClick(event){var _a,_b;if(this.disabled||this.loading){event.preventDefault();return;}sendAnalytics({category:'ui-component',parentContext:this.parentContext,tag:this.el.tagName.toLowerCase(),name:((_a=this.label)===null||_a===void 0?void 0:_a.toLowerCase())||((_b=this.ariaLabel)===null||_b===void 0?void 0:_b.toLowerCase())||'',action:'click'});// If an onClick prop is provided, call it
|
|
79
79
|
if(typeof this.triggerClick==='function'){this.triggerClick();// Trigger the passed-in function
|
|
80
80
|
}}handleKeyDown(event){if(this.disabled||this.loading){// Fix: check loading too
|
|
81
|
-
return;}if(event.key==='Enter'||this.elementType==='a'&&event.key===' '){event.preventDefault();this.handleClick(event);}}render(){const classes=this.button({intent:this.intent,loading:this.loading,iconPos:this.iconPos,size:this.size,pill:this.pill,iconOnly:!this.label,iconSmall:this.iconSmall});const ElementType=this.elementType;const isInteractive=!this.disabled&&!this.loading;return h(Host,{key:'
|
|
81
|
+
return;}if(event.key==='Enter'||this.elementType==='a'&&event.key===' '){event.preventDefault();this.handleClick(event);}}render(){const classes=this.button({intent:this.intent,loading:this.loading,iconPos:this.iconPos,size:this.size,pill:this.pill,iconOnly:!this.label,iconSmall:this.iconSmall});const ElementType=this.elementType;const isInteractive=!this.disabled&&!this.loading;return h(Host,{key:'25a7b4ffda3df65e91c77a18becd45bc40973f3c'},h(ElementType,{key:'0f00d82a37f3189b862015eb2d915f2364b6d75d',tabindex:isInteractive?'0':'-1',"aria-label":this.label?undefined:this.ariaLabel,"aria-disabled":this.disabled||this.loading?'true':undefined,"aria-busy":this.loading?'true':undefined,disabled:this.elementType==='button'?this.disabled||this.loading:undefined,role:this.elementType==='a'?'button':undefined,class:`${classes||''}`,onClick:event=>this.handleClick(event),onKeyDown:event=>this.handleKeyDown(event)},this.label&&h("span",{key:'6e45dfefb4805eef0574f7462becca6cde85dbc0',class:this.loading?'opacity-0':'',"aria-hidden":this.loading?'true':undefined},this.label),this.loading&&h("span",{key:'9909c70db39a039b883854caff816d25f132b866',class:"absolute inset-0 flex items-center justify-center","aria-hidden":"true"},h("span",{key:'367cd65a13f81cbcb12d93855dc091a4309566bb',class:"loader",style:{border:`3px solid ${this.intent==='secondary'?'rgba(255, 255, 255, .3)':'rgba(0, 0, 0, .3)'}`,borderBottomColor:this.intent==='secondary'?'#fff':'#000'}})),this.icon?h("eds-icon-wrapper",{class:`
|
|
82
82
|
flex inline-flex items-center justify-center
|
|
83
83
|
${this.size==='large'?'h-24 w-24':'h-20 w-20'}
|
|
84
84
|
`,icon:this.icon,"aria-hidden":"true"}):null));}static get delegatesFocus(){return true;}get el(){return getElement(this);}};EdsButton.style=EdsButtonStyle0;var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};var prism={exports:{}};(function(module){/* **********************************************
|
|
@@ -810,7 +810,7 @@ pattern:RegExp('\\burl\\((?:'+string.source+'|'+/(?:[^\\\r\n()"']|\\[\s\S])*/.so
|
|
|
810
810
|
*/getHighlightedCode(){if(this.language&&Prism$1.languages[this.language]){return Prism$1.highlight(this.code,Prism$1.languages[this.language],this.language);}// eslint-disable-next-line
|
|
811
811
|
//console.warn(`Unsupported or missing language: ${this.language}`);
|
|
812
812
|
return this.code;// Fallback if language is not provided or unsupported
|
|
813
|
-
}render(){return h("div",{key:'
|
|
813
|
+
}render(){return h("div",{key:'bc74b6be37bcb24700d17b48b5398077e485abd7',class:"relative bg-stronger rounded-sm"},h("div",{key:'db0395bfd55eb3394ab2149c5c436f2a54e8afb0',class:"text-inverse flex justify-between items-center p-8"},this.language?h("span",{class:"f-ui-03"},this.language.toUpperCase()):h("pre",{class:"bg-stronger pl-8",role:"region","aria-label":"Code block without language"},h("code",{innerHTML:this.getHighlightedCode()})),h("span",{key:'628ad41f15f3a38abe4b7c382074c8f5a8679a8c',"aria-hidden":"true",class:"w-20 h-20 mt-8"},h("eds-icon-wrapper",{key:'1c95d57a5d8113d6ab7ebf7da713e058c7cc10f1',icon:this.copied?'success':'copy',onClick:()=>this.copyToClipboard()})),h("span",{key:'a64b2450b631835b6fc2c15047b09ceea5a9fc95',class:"sr-only"},"Copy Code")),this.language&&h("pre",{key:'51945cbee1504625b54362505b60f1bd1784bdda',class:`language-${this.language} bg-stronger pl-8 pb-8`,role:"region","aria-label":`Code block in ${this.language}`},h("code",{key:'55961aa8278177451e13c929ec7f7065afcac93b',innerHTML:this.getHighlightedCode()})));}get el(){return getElement(this);}};EdsCodeBlock.style=EdsCodeBlockStyle0;const edsDropdownCss=".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}";const EdsDropdownStyle0=edsDropdownCss;const EdsDropdown=class{constructor(hostRef){registerInstance(this,hostRef);this.dropdown=createEvent(this,"dropdown",7);this.focusableItems=[];/**
|
|
814
814
|
* Toggles the visibility of the dropdown and manages focus.
|
|
815
815
|
*/this.handleClick=()=>{var _a,_b;this.isOpen=!this.isOpen;if(this.isOpen){// refresh focusables each open in case slot changed
|
|
816
816
|
this.focusableItems=Array.from(((_a=this.panelEl)===null||_a===void 0?void 0:_a.querySelectorAll('a, button, [role="menuitem"]'))||[]);this.focusIndex=this.focusableItems.length?0:-1;this.focusItem();}else {this.closeDropdown();}this.dropdown.emit({expanded:this.isOpen});sendAnalytics({category:'ui-component',parentContext:null,tag:this.host.tagName.toLowerCase(),name:((_b=this.label)===null||_b===void 0?void 0:_b.toLowerCase())||'',action:this.isOpen?'expanded':'collapsed'});};this.icon=undefined;this.label=undefined;this.rounded=false;this.ariaLabel='Open dropdown';this.asNav=true;this.dropdownPos='left';this.dropdownOffset=true;this.intent='tertiary';this.autoClose=true;this.noCloseSelector='[data-dropdown-no-close]';this.isOpen=false;this.focusIndex=-1;}async close(){this.closeDropdown();}/**
|
|
@@ -834,7 +834,7 @@ const shouldNotClose=path.some(t=>{var _a;const n=t;return (_a=n===null||n===voi
|
|
|
834
834
|
setTimeout(()=>this.closeDropdown(),0);}}/**
|
|
835
835
|
* Renders the dropdown component and displays its content when open.
|
|
836
836
|
* @returns {JSX.Element} The rendered dropdown component.
|
|
837
|
-
*/render(){return h("div",{key:'
|
|
837
|
+
*/render(){return h("div",{key:'ffc4915b2104e3d2dd347900acd897f56910a674',class:"z-focus relative",ref:el=>this.dropdownContent=el},h("eds-button",{key:'ba48bdd7b75fd230bdc2dd564bd477f0349f5426',label:this.label,"aria-label":this.ariaLabel,icon:this.icon,intent:this.intent,onClick:this.handleClick,"aria-expanded":this.isOpen.toString(),"aria-haspopup":"menu"}),h("nav",{key:'a29b57598a2ed8fcc9593c928df9443fd4449481',ref:el=>this.panelEl=el,role:"menu",class:{'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8':true,'left-4':this.dropdownPos==='left'&&this.dropdownOffset,'left-0':this.dropdownPos==='left'&&!this.dropdownOffset,'right-4':this.dropdownPos==='right'&&this.dropdownOffset,'right-0':this.dropdownPos==='right'&&!this.dropdownOffset,'rounded-lg':this.rounded},style:{display:this.isOpen?'block':'none'},"aria-label":"Dropdown","aria-hidden":!this.isOpen},h("slot",{key:'ddf003345ef5181b968b4bfd8962805d09d15e89'})));}get host(){return getElement(this);}};EdsDropdown.style=EdsDropdownStyle0;// utils/validators.ts
|
|
838
838
|
function validateField(name,value,type,required,maxLength,min,max){const errors=[];if(required&&!value){//errors.push(`${name} is required.`);
|
|
839
839
|
const shortName=name.length>30?`${name.slice(0,27)}…`:name;errors.push(`“${shortName}” is required.`);}if(type==='number'){const parsed=typeof value==='number'?value:parseFloat(value);if(isNaN(parsed)){errors.push(`${name} must be a valid number.`);}else {if(typeof min==='number'&&parsed<min){errors.push(`${name} must be greater than or equal to ${min}.`);}if(typeof max==='number'&&parsed>max){errors.push(`${name} must be less than or equal to ${max}.`);}}}if(maxLength&&typeof value==='string'&&value.length>maxLength){errors.push(`${name} must be at most ${maxLength} characters.`);}if(type==='email'&&value&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.toString())){errors.push('Invalid email format.');}return errors;}function validateFieldGroup(name,required,formEl){// Find all eds-input-field components that contain inputs with the given name.
|
|
840
840
|
const groupFields=Array.from(formEl.querySelectorAll('eds-input-field')).filter(edsField=>{var _a,_b;return ((_b=(_a=edsField.shadowRoot)===null||_a===void 0?void 0:_a.querySelectorAll(`input[name="${name}"]`))===null||_b===void 0?void 0:_b.length)>0;});// Collect all input elements with the matching name inside those components.
|
|
@@ -866,8 +866,15 @@ const inputEl=findFieldElement(formEl,field.name);if(inputEl){const value=inputE
|
|
|
866
866
|
//isFieldVisible
|
|
867
867
|
}){// Pass 1: Update state for all fields.
|
|
868
868
|
const updatedValues=Object.assign({},currentValues);parsedFields.forEach(field=>{const value=initData[field.name];if(value!==undefined){updatedValues[field.name]=value;}});return {updatedValues};}const edsFormCss=".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}";const EdsFormStyle0=edsFormCss;const EdsForm=class{constructor(hostRef){registerInstance(this,hostRef);this.form=createEvent(this,"form",7);this.name='eds-form';this.title='Form Title';this.description='Form Description';this.setFormUrl=true;this.formBtn=true;this.formBtnLabel='Submit';this.buttonIntent='primary';this.errorMessage='Some fields in your form are incorrect.';this.fields=[];this.groups=[];this.initData={};this.formStyle='default';this.values={};this.isSubmitting=false;this.hasError=false;this.errors={};this.parsedFields=[];this.parsedGroups=[];}async setData(newData){this.populateFormWithInitData(newData);}componentWillLoad(){this.parseFields(this.fields);this.parseGroups(this.groups);// Emit context for each eds-link element after the component is fully loaded
|
|
869
|
-
const links=this.el.querySelectorAll('eds-button');links.forEach(link=>{this.emitContext(link);});}componentDidLoad(){if(this.shouldFormProcessInitData){this.populateFormWithInitData(this.initData);}}get shouldFormProcessInitData(){return !!this.initData;}parseFields(newValue){this.parsedFields=parseData(newValue);}parseGroups(newVal){this.parsedGroups=parseData(newVal);}emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});linkElement.dispatchEvent(event);}isFieldVisible(field){if(!field.condition){return true;}const actual=this.values[field.condition.field];const expected=field.condition.value;// Handle
|
|
870
|
-
|
|
869
|
+
const links=this.el.querySelectorAll('eds-button');links.forEach(link=>{this.emitContext(link);});}componentDidLoad(){if(this.shouldFormProcessInitData){this.populateFormWithInitData(this.initData);}}get shouldFormProcessInitData(){return !!this.initData;}parseFields(newValue){this.parsedFields=parseData(newValue);}parseGroups(newVal){this.parsedGroups=parseData(newVal);}emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});linkElement.dispatchEvent(event);}isFieldVisible(field){if(!field.condition){return true;}const actual=this.values[field.condition.field];const expected=field.condition.value;// Handle undefined/null/empty
|
|
870
|
+
if(actual==null){return expected==null||expected==='';}// Handle arrays (multi-select, checkboxes)
|
|
871
|
+
if(Array.isArray(actual)){return actual.some(val=>this.normalizeValue(val)===this.normalizeValue(expected));}// Handle comma-separated strings (from checkboxes stored as "val1,val2")
|
|
872
|
+
if(typeof actual==='string'&&actual.includes(',')){const values=actual.split(',').map(v=>v.trim());return values.some(val=>this.normalizeValue(val)===this.normalizeValue(expected));}// Standard comparison with normalization
|
|
873
|
+
return this.normalizeValue(actual)===this.normalizeValue(expected);}normalizeValue(value){if(value==null){return '';}if(typeof value==='boolean'){return value?'true':'false';}if(typeof value==='number'){return String(value);}if(typeof value==='string'){return value.trim().toLowerCase();}return String(value).trim().toLowerCase();}validateForm(){const{errors,hasError}=validateFormFields(this.parsedFields,this.formEl,this.values,(field,_values)=>// Use a temporary object with the condition to reuse isFieldVisible logic
|
|
874
|
+
this.isFieldVisible(field));this.errors=errors;this.hasError=hasError;}populateFormWithInitData(initData){const{updatedValues}=getFormInitData({initData,parsedFields:this.parsedFields,currentValues:this.values,formEl:this.formEl,isFieldVisible:(field,values)=>{if(!field.condition){return true;}const actual=values[field.condition.field];const expected=field.condition.value;// Handle undefined/null/empty
|
|
875
|
+
if(actual==null){return expected==null||expected==='';}// Handle arrays
|
|
876
|
+
if(Array.isArray(actual)){return actual.some(val=>this.normalizeValue(val)===this.normalizeValue(expected));}// Handle comma-separated strings
|
|
877
|
+
if(typeof actual==='string'&&actual.includes(',')){const values=actual.split(',').map(v=>v.trim());return values.some(val=>this.normalizeValue(val)===this.normalizeValue(expected));}return this.normalizeValue(actual)===this.normalizeValue(expected);}});this.values=updatedValues;}getFormData(){const formData=new FormData();// Add the form name
|
|
871
878
|
formData.append('form_name',this.name);// Add the form URL
|
|
872
879
|
if(this.setFormUrl&&typeof window!=='undefined'){formData.set('form_url',window.location.href);}// Get all input elements within `eds-input-field`
|
|
873
880
|
const elements=Array.from(this.formEl.querySelectorAll('eds-input-field'));elements.forEach(element=>{if(element.shadowRoot){// Get input/textarea/select from the shadow DOM
|
|
@@ -883,10 +890,16 @@ formData.append('form_name',this.name);// Add the form URL
|
|
|
883
890
|
if(this.setFormUrl&&typeof window!=='undefined'){formData.set('form_url',window.location.href);}Object.keys(this.values).forEach(key=>{// Append each key-value pair to the FormData object.
|
|
884
891
|
formData.append(key,this.values[key]);});// 2) Only do the (slower) DOM scan if we actually have file fields in the config
|
|
885
892
|
const hasFileField=(_a=this.parsedFields)===null||_a===void 0?void 0:_a.some(f=>(f===null||f===void 0?void 0:f.type)==='file');if(hasFileField&&this.formEl){// Find file inputs inside each eds-input-field's shadowRoot
|
|
886
|
-
const hosts=Array.from(this.formEl.querySelectorAll('eds-input-field'));hosts.forEach(host=>{const root=host.shadowRoot;if(!root)return;const fileInputs=Array.from(root.querySelectorAll('input[type="file"][name]'));console.log(fileInputs);fileInputs.forEach(fi=>{const name=fi.name;const files=fi.files?Array.from(fi.files):[];if(files.length>0){// Append each file under the same field name (backend can use request.files.getlist(name))
|
|
893
|
+
const hosts=Array.from(this.formEl.querySelectorAll('eds-input-field'));hosts.forEach(host=>{const root=host.shadowRoot;if(!root){return;}const fileInputs=Array.from(root.querySelectorAll('input[type="file"][name]'));console.log(fileInputs);fileInputs.forEach(fi=>{const name=fi.name;const files=fi.files?Array.from(fi.files):[];if(files.length>0){// Append each file under the same field name (backend can use request.files.getlist(name))
|
|
887
894
|
files.forEach(file=>formData.append(name,file));}});});// (Optional) mark that this payload includes files (handy in logs / policies)
|
|
888
895
|
// formData.set('_has_files', '1');
|
|
889
|
-
}formData.forEach((value,
|
|
896
|
+
}/*formData.forEach((value, key) => {
|
|
897
|
+
if (value instanceof File) {
|
|
898
|
+
console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
|
|
899
|
+
} else {
|
|
900
|
+
console.log(`Field: ${key}, Value: ${value}`);
|
|
901
|
+
}
|
|
902
|
+
});*/return formData;}handleChange(e,field){const target=e.target;let newValue=target.value;if(target.type==='checkbox'){// Get the current comma separated string or default to an empty string.
|
|
890
903
|
const currentStr=this.values[field.name]||'';// Convert the string into an array. If the string is empty, we get an empty array.
|
|
891
904
|
let valuesArray=currentStr?currentStr.split(','):[];if(target.checked){// Only add if it's not already in the array.
|
|
892
905
|
if(!valuesArray.includes(target.value)){valuesArray.push(target.value);}}else {// Remove the value from the array if the checkbox is unchecked.
|
|
@@ -901,7 +914,7 @@ const newErrors=Object.assign({},this.errors);// Use the utility to validate the
|
|
|
901
914
|
const fieldErrors=validateInputField(field,target.value,this.formEl);if(fieldErrors.length>0){newErrors[field.name]=fieldErrors;}else {delete newErrors[field.name];}// Update the errors state and the hasError flag.
|
|
902
915
|
this.errors=newErrors;this.hasError=Object.keys(newErrors).length>0;// Emit the updated form state.
|
|
903
916
|
this.form.emit({event:'input',field:field.name,value:newValue,message:`${field.name} updated`//data: this.makeFormData()
|
|
904
|
-
});}handleRating(e,field){const rating=e.detail;this.values=Object.assign(Object.assign({},this.values),{[field.name]:rating});const newErrors=Object.assign({},this.errors);if(field.required&&rating===0){newErrors[field.name]=['This field is required'];}else {delete newErrors[field.name];}this.errors=newErrors;this.hasError=Object.keys(newErrors).length>0;this.form.emit({event:'change',field:field.name,value:rating,message:`${field.name} updated`});}handleNPS(e,field){const score=e.detail;this.values=Object.assign(Object.assign({},this.values),{[field.name]:score});const newErrors=Object.assign({},this.errors);if(field.required&&score===null){newErrors[field.name]=['This field is required'];}else {delete newErrors[field.name];}this.errors=newErrors;this.hasError=Object.keys(newErrors).length>0;this.form.emit({event:'change',field:field.name,value:score,message:`${field.name} updated`});}handleSubmit(e){var _a,_b;e===null||e===void 0?void 0:e.preventDefault();if(this.isSubmitting)return;this.isSubmitting=true;this.validateForm();if(this.hasError){this.isSubmitting=false;this.form.emit({event:'submit',validated:false,success:false,message:this.errorMessage//data: this.makeFormData()
|
|
917
|
+
});}handleRating(e,field){const rating=e.detail;this.values=Object.assign(Object.assign({},this.values),{[field.name]:rating});const newErrors=Object.assign({},this.errors);if(field.required&&rating===0){newErrors[field.name]=['This field is required'];}else {delete newErrors[field.name];}this.errors=newErrors;this.hasError=Object.keys(newErrors).length>0;this.form.emit({event:'change',field:field.name,value:rating,message:`${field.name} updated`});}handleNPS(e,field){const score=e.detail;this.values=Object.assign(Object.assign({},this.values),{[field.name]:score});const newErrors=Object.assign({},this.errors);if(field.required&&score===null){newErrors[field.name]=['This field is required'];}else {delete newErrors[field.name];}this.errors=newErrors;this.hasError=Object.keys(newErrors).length>0;this.form.emit({event:'change',field:field.name,value:score,message:`${field.name} updated`});}handleSubmit(e){var _a,_b;e===null||e===void 0?void 0:e.preventDefault();if(this.isSubmitting){return;}this.isSubmitting=true;this.validateForm();if(this.hasError){this.isSubmitting=false;this.form.emit({event:'submit',validated:false,success:false,message:this.errorMessage//data: this.makeFormData()
|
|
905
918
|
});// Emit form status submit false validation error
|
|
906
919
|
sendAnalytics({category:'ui-component',parentContext:null,tag:this.el.tagName.toLowerCase(),name:`${(_a=this.formBtnLabel)===null||_a===void 0?void 0:_a.toLowerCase()}/non-validated`||'',action:'click'});return;}// Log each entry in FormData to see file details
|
|
907
920
|
/*formData.forEach((value, key) => {
|
|
@@ -917,30 +930,31 @@ this.parsedGroups.forEach(g=>map[g.id]=[]);// always keep an ungrouped bucket
|
|
|
917
930
|
map['__ungrouped']=[];// only bucket fields that are currently visible
|
|
918
931
|
this.parsedFields.forEach(f=>{if(!this.isFieldVisible(f)){return;}const gid=f.groupId||'__ungrouped';if(!map[gid]){map[gid]=[];}map[gid].push(f);});return map;}renderField(field){var _a,_b,_c;if(!this.isFieldVisible(field)){return null;}// 1) Handle rating
|
|
919
932
|
if(field.type==='rating'){// pull the current value (or zero)
|
|
920
|
-
const val=this.values[field.name]||0;return h("div",{class:"form-group rating-field",key:field.name},h("div",{class:"flex justify-between"},field&&h("eds-input-label",{name:`rating-${field.name}`,label:field.label,disabled:field.disabled,required:field.required})),h("eds-rating",{id:`rating-${field.name}`,"rating-type":field.ratingType,"rating-count":field.ratingCount,"selected-rating":val,onRating:e=>this.handleRating(e,field)}),h("div",{class:"mt-6"},h("eds-input-footer",{id:`${field.name}-footer`,name:field.name,message:field.message,"error-message":(_a=this.errors[field.name])===null||_a===void 0?void 0:_a.join('<br/>'),error:!!this.errors[field.name],link:field.link})));}else if(field.type==='nps'){return h("div",{class:"form-group nps-field",key:field.name},h("div",{class:"flex justify-between"},field&&h("eds-input-label",{name:`nps-${field.name}`,label:field.question,disabled:field.disabled,required:field.required})),h("eds-nps",{id:`nps-${field.name}`,"right-label":field.rightLabel,"left-label":field.leftLabel,onNps:e=>this.handleNPS(e,field)}),h("div",{class:"mt-6"},h("eds-input-footer",{id:`${field.name}-footer`,name:field.name,"error-message":(_b=this.errors[field.name])===null||_b===void 0?void 0:_b.join('<br/>'),error:!!this.errors[field.name]})));}return h("eds-input-field",{key:field.name,name:field.name,label:field.label,placeholder:field.placeholder,type:field.type,value:this.values[field.name],required:field.required,hint:field.hint,message:field.message,error:!!this.errors[field.name],errorMessage:(_c=this.errors[field.name])===null||_c===void 0?void 0:_c.join('<br/>'),options:field.options,onInput:e=>this.handleInput(e,field),onChangeNative:e=>this.handleChange(e,field)});}async getData(){return this.makeFormData();}render(){const hiddenFields=this.parsedFields.filter(field=>field.type==='hidden');//const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
|
|
933
|
+
const val=this.values[field.name]||0;return h("div",{class:"form-group rating-field",key:field.name},h("div",{class:"flex justify-between"},field&&h("eds-input-label",{name:`rating-${field.name}`,label:field.label,disabled:field.disabled,required:field.required})),h("eds-rating",{id:`rating-${field.name}`,"rating-type":field.ratingType,"rating-count":field.ratingCount,"selected-rating":val,onRating:e=>this.handleRating(e,field)}),h("div",{class:"mt-6"},h("eds-input-footer",{id:`${field.name}-footer`,name:field.name,message:field.message,"error-message":(_a=this.errors[field.name])===null||_a===void 0?void 0:_a.join('<br/>'),error:!!this.errors[field.name],link:field.link})));}else if(field.type==='nps'){return h("div",{class:"form-group nps-field",key:field.name},h("div",{class:"flex justify-between"},field&&h("eds-input-label",{name:`nps-${field.name}`,label:field.question,disabled:field.disabled,required:field.required})),h("eds-nps",{id:`nps-${field.name}`,"right-label":field.rightLabel,"left-label":field.leftLabel,onNps:e=>this.handleNPS(e,field)}),h("div",{class:"mt-6"},h("eds-input-footer",{id:`${field.name}-footer`,name:field.name,"error-message":(_b=this.errors[field.name])===null||_b===void 0?void 0:_b.join('<br/>'),error:!!this.errors[field.name]})));}return h("eds-input-field",{key:field.name,name:field.name,label:field.label,placeholder:field.placeholder,type:field.type,value:this.values[field.name],required:field.required,hint:field.hint,message:field.message,link:field.link,error:!!this.errors[field.name],errorMessage:(_c=this.errors[field.name])===null||_c===void 0?void 0:_c.join('<br/>'),options:field.options,onInput:e=>this.handleInput(e,field),onChangeNative:e=>this.handleChange(e,field)});}async getData(){return this.makeFormData();}render(){const hiddenFields=this.parsedFields.filter(field=>field.type==='hidden');//const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
|
|
921
934
|
const buckets=this.groupedFields;// build the shadow/bg classes if formStyle="shadow"
|
|
922
|
-
const styleClasses=this.formStyle==='shadow'?'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32':'';return h("form",{key:'
|
|
923
|
-
if(this.inputRef){this.inputRef.focus();}}disconnectedCallback(){if(this.debounceTimer){clearTimeout(this.debounceTimer);}}handleDocumentClick(event){const path=event.composedPath();if(!path.includes(this.el)){this.showDropdown=false;this.selectedIndex=-1;}}handleKeydown(event){if(!this.showDropdown||this.results.length===0){if(event.key==='Escape'){this.searchClosed.emit();}return;}switch(event.key){case'ArrowDown':event.preventDefault();this.selectedIndex=Math.min(this.selectedIndex+1,this.results.length-1);this.scrollToSelected();break;case'ArrowUp':event.preventDefault();this.selectedIndex=Math.max(this.selectedIndex-1,-1);this.scrollToSelected();break;case'Enter':event.preventDefault();if(this.selectedIndex>=0&&this.selectedIndex<this.results.length){this.selectResult(this.results[this.selectedIndex]);}break;case'Escape':this.showDropdown=false;this.selectedIndex=-1;this.searchClosed.emit();break;}}async runSearch(){var _a;const query=this.query.trim();if(!query){this.results=[];this.hasSearched=false;this.showDropdown=false;return;}this.loading=true;this.error='';try{const response=await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`);if(!response.ok){throw new Error('Search failed');}const data=await response.json();this.results=(_a=data.items)!==null&&_a!==void 0?_a:[];this.hasSearched=true;this.showDropdown=true;this.selectedIndex=-1;}catch(err){console.error('Search error:',err);
|
|
935
|
+
const styleClasses=this.formStyle==='shadow'?'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32':'';return h("form",{key:'a4b6cf51242567739fc3ff2da482c41edb4e4e57',class:styleClasses,ref:el=>this.formEl=el,autocomplete:"on",onSubmit:this.handleSubmit},h("div",{key:'5f7e1d618f8a10a1cd6aa8d512c04064a484cd93',class:"flex flex-col gap-y-24"},this.title&&h("span",{key:'283d752d3e9f4ede0f50493ba9e5010376ebfb1f',role:"heading",class:"f-heading-04"},this.title),this.description&&h("span",{key:'bd5866482b87bdc86a59594b884a9b81c676afdb',class:"f-body-02 text-light"},this.description),h("slot",{key:'b2de746ccf8743fdef545a70ab111dfff0d7912f'})),hiddenFields.map((field,index)=>h("eds-input",{key:index,type:"hidden",name:field.name,value:field.value})),this.parsedGroups.filter(g=>Array.isArray(buckets[g.id])&&buckets[g.id].length>0).map(g=>h("div",{class:"mt-32",key:g.id},h("span",{class:"f-body-02"},h("b",null,g.title)),h("div",{class:"border-group mt-32 mb-32 flex flex-col gap-y-24"},buckets[g.id].map(f=>this.renderField(f))))),h("div",{key:'917c5bd2e6048a91487f0a66bd0426e529295f9e',class:"flex flex-col mt-32 gap-y-24"},buckets['__ungrouped'].map(f=>this.renderField(f))),this.formBtn&&h("div",{key:'96abbd19ea2869c21146f0b37da7ff6b89fbf66c',class:"mt-32"},h("eds-button",{key:'066348df32cf27fc6e56c94b9d5c455bc51b4adf',intent:this.buttonIntent,label:this.formBtnLabel,disabled:this.isSubmitting,loading:this.isSubmitting,onClick:()=>this.handleSubmit()})));}get el(){return getElement(this);}static get watchers(){return {"fields":["parseFields"],"groups":["parseGroups"]};}};EdsForm.style=EdsFormStyle0;const edsGlobalSearchCss=":host{display:block;width:100%}p{margin:0}ol,ul,menu{list-style:none;margin:0;padding:0}.search-wrapper{position:relative;width:100%}.search-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:white;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);max-height:500px;overflow:hidden;z-index:9999;display:flex;flex-direction:column}.dropdown-state{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:#616161;font-size:14px}.dropdown-results{list-style:none;margin:0;overflow-y:auto;overflow-x:hidden;max-height:440px}.result-item{padding:10px 14px;cursor:pointer;transition:background-color 0.15s ease;border-left:3px solid transparent;overflow:hidden;word-wrap:break-word;word-break:break-word}.result-item:hover,.result-item--selected{background-color:var(--grey-200);border-left-color:var(--green-600)}.result-header{display:flex;align-items:center;justify-content:space-between}.result-snippet{font-size:13px;color:#616161;line-height:1.4;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.dropdown-footer{border-top:1px solid #e0e0e0;padding:8px 16px;background:#fafafa;flex-shrink:0}.footer-hint{font-size:11px;color:#757575;display:flex;align-items:center;gap:4px;flex-wrap:wrap}kbd{display:inline-block;padding:2px 5px;font-size:10px;font-family:monospace;line-height:1;color:#424242;background-color:#f5f5f5;border:1px solid #bdbdbd;border-radius:3px;box-shadow:0 1px 0 rgba(0, 0, 0, 0.1)}.dropdown-results::-webkit-scrollbar{width:8px}.dropdown-results::-webkit-scrollbar-track{background:#f5f5f5}.dropdown-results::-webkit-scrollbar-thumb{background:#bdbdbd;border-radius:4px}.dropdown-results::-webkit-scrollbar-thumb:hover{background:#9e9e9e}.flex{display:flex}.inline-flex{display:inline-flex}.text-center{text-align:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-error{color:var(--red-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-4{margin-left:0.25rem}.ml-8{margin-left:0.5rem}.ml-16{margin-left:1rem}.p-16{padding:1rem}.p-64{padding:4rem}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}";const EdsGlobalSearchStyle0=edsGlobalSearchCss;const EdsGlobalSearch=class{constructor(hostRef){registerInstance(this,hostRef);this.resultSelected=createEvent(this,"resultSelected",7);this.searchClosed=createEvent(this,"searchClosed",7);this.handleInput=event=>{var _a;const target=event.target;this.query=target.value;if(this.debounceTimer){clearTimeout(this.debounceTimer);}if(!this.query.trim()){this.results=[];this.hasSearched=false;this.showDropdown=false;return;}sendAnalytics({category:'shared-ui',parentContext:null,tag:this.el.tagName.toLowerCase(),name:`search-input: ${(_a=this.query)===null||_a===void 0?void 0:_a.toLowerCase()}`||'unknow seach input query',action:'click'});this.debounceTimer=window.setTimeout(()=>{this.runSearch();},this.debounceDelay);};this.apiEndpoint='/api/v1/global-search';this.placeholder='Search Handbook + Design...';this.limit=20;this.debounceDelay=300;this.query='';this.results=[];this.loading=false;this.error='';this.hasSearched=false;this.showDropdown=false;this.selectedIndex=-1;}componentDidLoad(){// Focus input if needed
|
|
936
|
+
if(this.inputRef){this.inputRef.focus();}}disconnectedCallback(){if(this.debounceTimer){clearTimeout(this.debounceTimer);}}handleDocumentClick(event){const path=event.composedPath();if(!path.includes(this.el)){this.showDropdown=false;this.selectedIndex=-1;}}handleKeydown(event){if(!this.showDropdown||this.results.length===0){if(event.key==='Escape'){this.searchClosed.emit();}return;}switch(event.key){case'ArrowDown':event.preventDefault();this.selectedIndex=Math.min(this.selectedIndex+1,this.results.length-1);this.scrollToSelected();break;case'ArrowUp':event.preventDefault();this.selectedIndex=Math.max(this.selectedIndex-1,-1);this.scrollToSelected();break;case'Enter':event.preventDefault();if(this.selectedIndex>=0&&this.selectedIndex<this.results.length){this.selectResult(this.results[this.selectedIndex]);}break;case'Escape':this.showDropdown=false;this.selectedIndex=-1;this.searchClosed.emit();break;}}async runSearch(){var _a;const query=this.query.trim();if(!query){this.results=[];this.hasSearched=false;this.showDropdown=false;return;}this.loading=true;this.error='';try{const response=await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`);if(!response.ok){throw new Error('Search failed');}const data=await response.json();this.results=(_a=data.items)!==null&&_a!==void 0?_a:[];this.hasSearched=true;this.showDropdown=true;this.selectedIndex=-1;}catch(err){//console.error('Search error:', err);
|
|
937
|
+
this.error='Search failed. Please try again.';this.results=[];this.showDropdown=true;}finally{this.loading=false;}}selectResult(result){this.resultSelected.emit(result);this.searchClosed.emit();sendAnalytics({category:'shared-ui',parentContext:null,tag:this.el.tagName.toLowerCase(),name:`search-select: ${result.url}`||'unknow search result selection',action:'click'});window.open(result.url,'_blank','noopener,noreferrer');}scrollToSelected(){if(this.selectedIndex>=0&&this.dropdownRef){const selectedItem=this.dropdownRef.querySelector(`[data-index="${this.selectedIndex}"]`);if(selectedItem){selectedItem.scrollIntoView({block:'nearest',behavior:'smooth'});}}}stripHtml(html){const div=document.createElement('div');div.innerHTML=html;return div.textContent||div.innerText||'';}get hasResults(){return this.results.length>0;}get showEmpty(){return this.hasSearched&&!this.loading&&!this.hasResults&&this.query.trim();}render(){return h("div",{key:'be8f46caa1d12a034401686c9860b87032652322',class:"search-wrapper"},h("eds-input-field",{key:'c31ac27a5e9f97729da8f7168e22ad09205ffce0',icon:"search","input-id":"search-global",type:"text",name:"search-box-global",placeholder:this.placeholder,value:this.query,onInput:this.handleInput}),this.showDropdown&&h("div",{key:'57b87393636913be24856bedc805e180171f084e',class:"search-dropdown",ref:el=>this.dropdownRef=el},this.loading&&h("div",{key:'3ddb78e5a734d69b581e64ee825d12574f98574d',class:"flex text-center justify-center p-64"},h("eds-spinner",{key:'178c99535ce61b320fd70ab1f3aeb8408c868fe3',variant:"primary",size:"sm"})),this.error&&!this.loading&&h("div",{key:'87feb37ffec93fa12185cd1fffb5c4f8ac54cd55',class:"flex text-center justify-center p-16"},h("span",{key:'07544fe95721c9e0898364f3bdcfc0b1ca79a48d',class:"text-error f-body-02"},this.error)),this.showEmpty&&h("div",{key:'6595178cb14ce5e21cdb15f96e039975a8af0c67',class:"dropdown-state"},h("eds-icon-wrapper",{key:'f5b614218bb6ef642c3d1f4c7d41f56f28319a9d',icon:"search"}),h("div",{key:'857671d7783d8fe854e6b3203a3755d24f337e5d'},h("p",{key:'89bae3bfb4efa63e777121088a59d873652de4e9',class:"f-body-02"},"No results found"),h("p",{key:'1a951b1a6f0daf7506e6e7892a211f92d95b94d4',class:"f-ui-04 text-lightest"},"Try different keywords"))),this.hasResults&&!this.loading&&h("ul",{key:'1c1711dc4332d70cefe965dcfeeabc3c6745ce4d',class:"dropdown-results"},this.results.map((result,index)=>h("li",{key:result.id,"data-index":index,class:{'result-item':true,'result-item--selected':index===this.selectedIndex},onClick:()=>this.selectResult(result),onMouseEnter:()=>this.selectedIndex=index},h("div",{class:"result-header"},h("span",{class:"f-body-02"},result.title)),h("div",{class:"inline"},h("eds-tag",{intent:"accent",label:result.source}),result.section&&h("span",{class:"result-badge"},result.section),h("span",{class:"f-ui-03-light text-lighter ml-8"},result.url)),result.snippet&&h("p",{class:"result-snippet"},this.stripHtml(result.snippet))))),this.hasResults&&!this.loading&&h("div",{key:'26e172b579f71b7096481994c0a4af80d3e416d3',class:"dropdown-footer"},h("span",{key:'57a6432125472aaed3b7b46c106aeec0d0a5ee50',class:"footer-hint"},h("kbd",{key:'c8ca5d4b1a2e8f59665290ab78499f8db431a2e9'},"\u2191")," ",h("kbd",{key:'89a6520e51bed33cfc37b892480af44e5b77a9c3'},"\u2193")," navigate \u2022 ",h("kbd",{key:'4173b9ec77d52d4570e016c3366e27fef225ccb0'},"\u21B5")," select \u2022 ",h("kbd",{key:'7f118c184acf52edd545e1f97b4ca991eaa1aa1f'},"esc")," close"))));}get el(){return getElement(this);}};EdsGlobalSearch.style=EdsGlobalSearchStyle0;const edsHeaderCss=".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-10{z-index:10}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hidden{display:none}.gap-x-2{-moz-column-gap:0.125rem;column-gap:0.125rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.after\\:effect-opacity::after{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.whitespace-nowrap{white-space:nowrap}.\\!text-current{color:currentColor !important}.overflow-hidden{overflow:hidden}.after\\:\\!border-transparent::after{border-color:var(--transparent) !important}.hover\\:after\\:\\!border-transparent:hover::after{border-color:var(--transparent) !important}.after\\:opacity-0::after{opacity:0}.hover\\:after\\:opacity-100:hover::after{opacity:1}.px-16{padding-left:1rem;padding-right:1rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}}";const EdsHeaderStyle0=edsHeaderCss;const EdsHeader=class{constructor(hostRef){registerInstance(this,hostRef);this.toggleheadermenu=createEvent(this,"toggleheadermenu",7);this.homeUrl='/';this.links=undefined;this.headerVariant='default';this.menuEnabled=false;this.isMenuOpen=false;this.isUserMenuOpen=false;}componentDidLoad(){var _a,_b;const links=(_b=(_a=this.hostEl.shadowRoot)===null||_a===void 0?void 0:_a.querySelectorAll('eds-link'))!==null&&_b!==void 0?_b:[];links.forEach(link=>this.emitContext(link));}emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.hostEl.tagName.toLowerCase(),identifier:null}});linkElement.dispatchEvent(event);}handleToggleMenu(){this.toggleheadermenu.emit(!this.isMenuOpen);}toggleUserMenu(){this.isUserMenuOpen=!this.isUserMenuOpen;}get parsedLinks(){return parseData(this.links);}render(){// Define classes based on headerVariant
|
|
924
938
|
const variantClasses={default:'text-default bg-dark',inverse:'text-default bg-inverse',strong:'text-inverse bg-strongest'};const classes=variantClasses[this.headerVariant]||variantClasses.default;// Logo color variant: default and inverse use 'color', strong uses 'color-white'
|
|
925
|
-
const logoType=this.headerVariant==='strong'?'color-white':'color';return h("header",{key:'
|
|
939
|
+
const logoType=this.headerVariant==='strong'?'color-white':'color';return h("header",{key:'cf272ed6242b2effa3027081d72b58025c49d055',role:"banner",class:`flex items-center justify-between relative z-10 ${classes}`},h("div",{key:'16f81e55c3aa28beabfead914488ce1fd70b408d',class:"mr-auto w-[200px] h-[85px]"},h("eds-logo",{key:'0961fb91dff26c457833b67ef963d60a9902a916',type:logoType,href:this.homeUrl})),this.parsedLinks&&h("nav",{key:'a034d1bfc21da2245b3c91a2f91f092476d67f97',role:"navigation","aria-label":"Primary",class:"absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex"},h("ul",{key:'06ebd9012b829a30f7cdc27f417116a21d2bfc2f',class:"flex gap-x-16"},this.parsedLinks.map(link=>h("eds-link",{label:link.label,"aria-label":link.label,url:link.url,intent:"strong",size:"large",icon:link.icon,external:link.external,"extra-class":"after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100"})))),h("slot",{key:'68c34af928ee215329d354ca1a5ef7850d1112cf',name:"actions"}),this.menuEnabled&&h("div",{key:'cb4cd94fbf5ebbd770631066f2f69f8ac50a3f5f',class:"md:hidden flex overflow-hidden px-16"},h("eds-button",{key:'8f2aa4d59705e9410a0fa8b10c9f348fcfe73db3',"aria-label":"Menu",intent:this.headerVariant==='default'?'ghost':'ghostInverse',icon:"menu",size:"small",onClick:()=>this.handleToggleMenu()})));}get hostEl(){return getElement(this);}};EdsHeader.style=EdsHeaderStyle0;const EdsIconWrapper=class{constructor(hostRef){registerInstance(this,hostRef);this.TagName=null;this.icon='arrow-right';this.class='';this.IconComponent=null;}componentWillLoad(){this.loadIconComponent(this.icon);}iconChanged(newValue){this.loadIconComponent(newValue);}async loadIconComponent(iconName){try{// Dynamically import the Stencil icon component based on the icon name
|
|
926
940
|
this.IconComponent=`eds-icon-${iconName}`;}catch(error){//console.error(`Failed to load icon component: ${iconName}`, error);
|
|
927
941
|
this.IconComponent=`eds-icon-unknown`;}}render(){const IconComponent=this.IconComponent;return IconComponent?h(IconComponent,{class:this.class}):null;}static get watchers(){return {"icon":["iconChanged"]};}};const edsImgCss="/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block;\n /* 1 */\n vertical-align: middle;\n /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n/* endregion */\n/* region BG */\n.effect-bg-pattern {\n position: relative;\n z-index: 1;\n\n &::before {\n position: absolute;\n content: '';\n z-index: -1;\n inset: 0;\n background-color: rgba(208, 208, 208, 0.75);\n opacity: 0.75;\n background-image: repeating-linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5), repeating-linear-gradient(45deg, #F5F5F5 25%, #D0D0D0 25%, #D0D0D0 75%, #F5F5F5 75%, #F5F5F5);\n background-position: 0 0, 8px 8px;\n background-size: 16px 16px;\n }\n}\n\n.effect-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n\n.object-center {\n -o-object-position: center;\n object-position: center;\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}";const EdsImgStyle0=edsImgCss;const EdsImg=class{constructor(hostRef){registerInstance(this,hostRef);this.img=null;this.handleLoad=()=>{this.loaded=true;this.showBg=false;};// On error, remove the background effect so users know the image failed to load.
|
|
928
|
-
this.handleError=()=>{this.loaded=true;this.showBg=false;};this.handleTransitionEnd=()=>{this.showBg=false;};this.src=undefined;this.alt='';this.width=undefined;this.height=undefined;this.srcset=undefined;this.sizes=undefined;this.formats=[];this.lazyload=true;this.withBg=true;this.loaded=!this.lazyload;this.showBg=this.withBg;}componentDidLoad(){if(this.img&&this.img.complete){this.loaded=true;this.showBg=false;}}render(){const imgOpts={};if(this.lazyload){imgOpts['loading']='lazy';imgOpts['decoding']='async';}return h("div",{key:'
|
|
942
|
+
this.handleError=()=>{this.loaded=true;this.showBg=false;};this.handleTransitionEnd=()=>{this.showBg=false;};this.src=undefined;this.alt='';this.width=undefined;this.height=undefined;this.srcset=undefined;this.sizes=undefined;this.formats=[];this.lazyload=true;this.withBg=true;this.loaded=!this.lazyload;this.showBg=this.withBg;}componentDidLoad(){if(this.img&&this.img.complete){this.loaded=true;this.showBg=false;}}render(){const imgOpts={};if(this.lazyload){imgOpts['loading']='lazy';imgOpts['decoding']='async';}return h("div",{key:'1ff909ca6fe3fe40ca5659cea033b404a45580fb',class:{'items-center justify-center':true,'effect-bg-pattern':this.lazyload&&this.showBg}},h("picture",{key:'92c92a5aaebd84d96a7bf8c291542d6a8cf4d896'},this.formats.map(format=>h("source",{type:format.type,srcSet:format.srcset,media:format.media,sizes:this.sizes})),h("img",Object.assign({key:'ac8eb664987b1205d5a96c723840ac3ccd779ac1',ref:el=>this.img=el,class:{'effect-opacity object-cover object-center':true,'opacity-100':this.loaded,'opacity-0':!this.loaded},width:this.width,height:this.height,sizes:this.sizes,src:this.src,srcSet:this.srcset,alt:this.alt},imgOpts,{onLoad:this.handleLoad,onError:this.handleError,onTransitionEnd:this.handleTransitionEnd}))));}get imgElement(){return getElement(this);}};EdsImg.style=EdsImgStyle0;const EdsInput=class{constructor(hostRef){registerInstance(this,hostRef);this.handleInput=e=>{const target=e.target;this.innerVal=target.value;if(this.maxLength&&this.type==='textarea'){this.maxLengthReached=target.value.length>=this.maxLength;}};this.name=undefined;this.inputId=undefined;this.placeholder=undefined;this.disabled=false;this.hasMessage=false;this.error=false;this.checked=undefined;this.type='text';this.required=false;this.value=undefined;this.icon=undefined;this.maxLength=undefined;this.options=[];this.extraClass=undefined;this.min=undefined;this.max=undefined;this.step=undefined;this.innerVal='';this.maxLengthReached=false;}onValueChanged(newValue){this.innerVal=newValue;}componentWillLoad(){// Initialize innerVal with the value prop if it's set
|
|
929
943
|
if(this.value){this.innerVal=this.value;}else if(this.type==='select'&&this.options.length>0){// If the type is select and there are options, set the initial value to the first option
|
|
930
|
-
this.innerVal=this.options[0].value;}}getInputElement(){return this.el.querySelector('input');}render(){const withIcon=!!this.icon;const describedBy=this.hasMessage||this.error?`${this.name}-error`:'';return h("div",{key:'
|
|
944
|
+
this.innerVal=this.options[0].value;}}getInputElement(){return this.el.querySelector('input');}render(){const withIcon=!!this.icon;const describedBy=this.hasMessage||this.error?`${this.name}-error`:'';return h("div",{key:'1800587d54da282566893c538d47aadf9f9bb390',class:"relative flex items-center"},this.type==='textarea'?h("textarea",{id:this.inputId||this.name,name:this.name,placeholder:this.placeholder,value:this.innerVal.toString(),required:this.required,disabled:this.disabled,class:`min-h-80 input input-textarea ${withIcon?'input-with-icon':''} ${this.error?'input-error':''} ${this.extraClass}`,"aria-invalid":this.error?'true':'false',"aria-describedby":describedBy,maxlength:this.maxLength,onInput:this.handleInput,onChange:this.handleInput}):this.type==='select'?h("select",{id:this.inputId||this.name,name:this.name,required:this.required,disabled:this.disabled,class:`input input-select ${this.error?'input-error':''} ${this.extraClass}`,"aria-invalid":this.error?'true':'false',"aria-describedby":describedBy,onInput:this.handleInput,onChange:this.handleInput},this.options.map(option=>h("option",{value:option.value,selected:option.value===this.innerVal,key:option.value},option.label))):h("input",Object.assign({id:this.inputId||this.name,name:this.name,placeholder:this.placeholder,value:this.innerVal.toString(),required:this.required,disabled:this.disabled,type:this.type,checked:['radio','checkbox'].includes(this.type)?this.checked:undefined},this.type==='number'?{min:this.min,max:this.max,step:this.step}:{},{class:`
|
|
931
945
|
${this.extraClass||''}
|
|
932
946
|
input ${this.type==='radio'?'input-radio':this.type==='checkbox'?'input-checkbox':''}
|
|
933
947
|
${withIcon&&this.type!=='radio'&&this.type!=='checkbox'?'input-icon pl-36':''}
|
|
934
948
|
${this.error?'input-error':''}
|
|
935
|
-
`,"aria-invalid":this.error?'true':'false',"aria-describedby":describedBy,maxlength:this.maxLength,onInput:this.handleInput,onChange:this.handleInput})),this.maxLength&&this.type==='textarea'&&h("span",{key:'df877332c68d4783d5f0f8d8beb94c1859cd00da',class:`input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached?'input-counter-error':''}`},this.maxLength),this.icon&&h("eds-icon-wrapper",{key:'94f7d3d75f5c578c10ab72b6140785b0b5988a13',class:`absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled?'text-lightest':'text-lightest'}`,icon:this.icon}));}get el(){return getElement(this);}static get watchers(){return {"value":["onValueChanged"]};}};const edsInputFieldCss=":root {\n font-optical-sizing: auto;\n}\nhtml,\nbody {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n/*\n:focus[data-focus-method=\"mouse\"],\n:focus[data-focus-method=\"touch\"] {\n outline: none !important;\n}\n*/\n/*FADE*/\n.fade-enter-active,\n.fade-leave-active {\n transition-duration: 300ms;\n transition-timing-function: linear;\n transition-property: opacity;\n}\n.fade-enter-from,\n.fade-leave-to {\n opacity: 0;\n}\n/*FADE TRANSLATE Y*/\n.fade-down-enter-active,\n.fade-down-leave-active {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n transition-property: opacity, transform;\n}\n.fade-down-enter-from,\n.fade-down-leave-to {\n opacity: 0;\n transform: translateY(12px);\n}\n/*SLIDE LEFT*/\n.slide-left-enter-active,\n.slide-left-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n transition-property: opacity, transform;\n}\n.slide-left-enter-from,\n.slide-left-leave-to {\n transform: translateX(-110%);\n}\n/*SLIDE BOTTOM*/\n.slide-bottom-enter-active,\n.slide-bottom-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n transition-property: opacity, transform;\n}\n.slide-bottom-enter-from,\n.slide-bottom-leave-to {\n transform: translateY(100%);\n}\n.slide-bottom-list-move,\n.slide-bottom-list-enter-active,\n.slide-bottom-list-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-property: opacity, transform;\n}\n.slide-bottom-list-enter-from,\n.slide-bottom-list-leave-to {\n opacity: 0;\n transform: translateY(100%);\n}\n.slide-bottom-list-leave-active {\n position: absolute;\n}\n/*COLLAPSE Y*/\n.collapseY-enter-active,\n.collapseY-leave-active {\n transition-duration: 300ms;\n transition-timing-function: linear;\n overflow: hidden;\n max-height: 500px;\n transition-property: max-height;\n}\n.collapseY-enter-from,\n.collapseY-leave-to {\n max-height: 0;\n}\n*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(147 197 253 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(147 197 253 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*/\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: currentColor; /* 2 */\n}\n::before,\n::after {\n --tw-content: '';\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n}\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsub {\n bottom: -0.25em;\n}\nsup {\n top: -0.5em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n outline: auto;\n}\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n box-shadow: none;\n}\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n vertical-align: baseline;\n}\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n display: list-item;\n}\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\nfieldset {\n margin: 0;\n padding: 0;\n}\nlegend {\n padding: 0;\n}\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n:root {\n --breakpoint: \"sm\";\n --container-width: unset;\n --inner-gutter: 8px;\n --outer-gutter: 16px;\n --grid-columns: 12;\n --env: \"dev\";\n --grid-column-bg: rgba(127, 255, 255, 0.25);\n}\n@media (min-width: 750px) {\n :root {\n --breakpoint: \"md\";\n --container-width: unset;\n --inner-gutter: 12px;\n --outer-gutter: 20px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 900px) {\n :root {\n --breakpoint: \"lg\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 1024px) {\n :root {\n --breakpoint: \"xl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 1280px) {\n :root {\n --breakpoint: \"xxl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 2200px) {\n :root {\n --breakpoint: \"xxxl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n.container {\n width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));\n margin-right: auto;\n margin-left: auto;\n}\n.container > * {\n --container-outer-gutter: 0;\n --breakout-container-outer-gutter: 0;\n}\n[class*='scrollbar-track-'], [class*='scrollbar-thumb-'] {\n --scrollbar-bg: #fafafa;\n --scrollbar-fg: #c1c1c1;\n --scrollbar-border: #e8e8e8;\n scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar, [class*='scrollbar-thumb-']::-webkit-scrollbar {\n width: var(--scrollbar-width, 15px);\n height: var(--scrollbar-width, 15px);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track, [class*='scrollbar-thumb-']::-webkit-scrollbar-track {\n background: var(--scrollbar-bg);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track:horizontal, [class*='scrollbar-thumb-']::-webkit-scrollbar-track:horizontal {\n border-top: 1px solid var(--scrollbar-border);\n border-bottom: 1px solid var(--scrollbar-border);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track:vertical, [class*='scrollbar-thumb-']::-webkit-scrollbar-track:vertical {\n border-inline-start: 1px solid var(--scrollbar-border);\n border-inline-end: 1px solid var(--scrollbar-border);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-thumb, [class*='scrollbar-thumb-']::-webkit-scrollbar-thumb {\n background: var(--scrollbar-fg);\n border-radius: 20px;\n border: var(--scrollbar-padding, 4px) solid transparent;\n background-clip: content-box;\n}\n:root {\n --spacing-space-01: 5rem;\n --spacing-space-02: 3.75rem;\n --spacing-space-03: 6.25rem;\n --spacing-space-04: 1.75rem;\n}\n@media (min-width: 900px) {\n :root {\n --spacing-space-01: 7.5rem;\n --spacing-space-02: 5rem;\n --spacing-space-03: 7.5rem;\n }\n}\n:root {\n --sans: Inter, Helvetica, Arial, sans-serif;\n --f-heading-01-fontFamily: var(--sans);\n --f-heading-01-fontWeight: 800;\n --f-heading-01-fontSize: 42px;\n --f-heading-01-lineHeight: 100%;\n --f-heading-01-letterSpacing: -0.01em;\n --f-heading-02-fontFamily: var(--sans);\n --f-heading-02-fontWeight: 800;\n --f-heading-02-fontSize: 36px;\n --f-heading-02-lineHeight: 100%;\n --f-heading-02-letterSpacing: -0.01em;\n --f-heading-03-fontFamily: var(--sans);\n --f-heading-03-fontWeight: 800;\n --f-heading-03-fontSize: 36px;\n --f-heading-03-lineHeight: 100%;\n --f-heading-03-letterSpacing: -0.01em;\n --f-heading-04-fontFamily: var(--sans);\n --f-heading-04-fontWeight: 800;\n --f-heading-04-fontSize: 28px;\n --f-heading-04-lineHeight: 100%;\n --f-heading-04-letterSpacing: -0.01em;\n --f-heading-05-fontFamily: var(--sans);\n --f-heading-05-fontWeight: 800;\n --f-heading-05-fontSize: 28px;\n --f-heading-05-lineHeight: 110%;\n --f-heading-05-letterSpacing: -0.01em;\n --f-heading-06-fontFamily: var(--sans);\n --f-heading-06-fontWeight: 800;\n --f-heading-06-fontSize: 22px;\n --f-heading-06-lineHeight: 120%;\n --f-body-01-fontFamily: var(--sans);\n --f-body-01-fontWeight: 600;\n --f-body-01-fontSize: 20px;\n --f-body-01-lineHeight: 140%;\n --f-body-01-letterSpacing: -0.01em;\n --f-body-02-fontFamily: var(--sans);\n --f-body-02-fontWeight: 600;\n --f-body-02-fontSize: 17px;\n --f-body-02-lineHeight: 150%;\n --f-ui-01-fontFamily: var(--sans);\n --f-ui-01-fontWeight: 800;\n --f-ui-01-fontSize: 18px;\n --f-ui-01-lineHeight: 110%;\n --f-ui-01-letterSpacing: -0.01em;\n --f-ui-02-fontFamily: var(--sans);\n --f-ui-02-fontWeight: 800;\n --f-ui-02-fontSize: 16px;\n --f-ui-02-lineHeight: 110%;\n --f-ui-02-letterSpacing: -0.01em;\n --f-ui-02-light-fontFamily: var(--sans);\n --f-ui-02-light-fontWeight: 600;\n --f-ui-02-light-fontSize: 16px;\n --f-ui-02-light-lineHeight: 110%;\n --f-ui-02-light-letterSpacing: -0.01em;\n --f-ui-03-fontFamily: var(--sans);\n --f-ui-03-fontWeight: 800;\n --f-ui-03-fontSize: 14px;\n --f-ui-03-lineHeight: 110%;\n --f-ui-03-letterSpacing: -0.01em;\n --f-ui-03-light-fontFamily: var(--sans);\n --f-ui-03-light-fontWeight: 600;\n --f-ui-03-light-fontSize: 14px;\n --f-ui-03-light-lineHeight: 130%;\n --f-ui-03-light-letterSpacing: -0.01em;\n --f-ui-04-fontFamily: var(--sans);\n --f-ui-04-fontWeight: 800;\n --f-ui-04-fontSize: 12px;\n --f-ui-04-lineHeight: 100%;\n --f-ui-04-letterSpacing: -0.01em;\n --f-ui-05-fontFamily: var(--sans);\n --f-ui-05-fontWeight: 800;\n --f-ui-05-fontSize: 10px;\n --f-ui-05-lineHeight: 110%;\n --f-ui-05-letterSpacing: -0.01em;\n --f-caption-fontFamily: var(--sans);\n --f-caption-fontWeight: 800;\n --f-caption-fontSize: 12px;\n --f-caption-lineHeight: 120%;\n --f-display-01-fontFamily: var(--sans);\n --f-display-01-fontWeight: 800;\n --f-display-01-fontSize: 120px;\n --f-display-01-lineHeight: 100%;\n --f-display-01-letterSpacing: -0.01em;\n}\n.f-heading-01 {\n font-family: var(--f-heading-01-fontFamily);\n font-weight: var(--f-heading-01-fontWeight);\n font-size: var(--f-heading-01-fontSize);\n line-height: var(--f-heading-01-lineHeight);\n letter-spacing: var(--f-heading-01-letterSpacing);\n}\n.f-heading-02 {\n font-family: var(--f-heading-02-fontFamily);\n font-weight: var(--f-heading-02-fontWeight);\n font-size: var(--f-heading-02-fontSize);\n line-height: var(--f-heading-02-lineHeight);\n letter-spacing: var(--f-heading-02-letterSpacing);\n}\n.f-heading-03 {\n font-family: var(--f-heading-03-fontFamily);\n font-weight: var(--f-heading-03-fontWeight);\n font-size: var(--f-heading-03-fontSize);\n line-height: var(--f-heading-03-lineHeight);\n letter-spacing: var(--f-heading-03-letterSpacing);\n}\n.f-heading-04 {\n font-family: var(--f-heading-04-fontFamily);\n font-weight: var(--f-heading-04-fontWeight);\n font-size: var(--f-heading-04-fontSize);\n line-height: var(--f-heading-04-lineHeight);\n letter-spacing: var(--f-heading-04-letterSpacing);\n}\n.f-heading-05 {\n font-family: var(--f-heading-05-fontFamily);\n font-weight: var(--f-heading-05-fontWeight);\n font-size: var(--f-heading-05-fontSize);\n line-height: var(--f-heading-05-lineHeight);\n letter-spacing: var(--f-heading-05-letterSpacing);\n}\n.f-heading-06 {\n font-family: var(--f-heading-06-fontFamily);\n font-weight: var(--f-heading-06-fontWeight);\n font-size: var(--f-heading-06-fontSize);\n line-height: var(--f-heading-06-lineHeight);\n letter-spacing: var(--f-heading-06-letterSpacing);\n}\n.f-body-01 {\n font-family: var(--f-body-01-fontFamily);\n font-weight: var(--f-body-01-fontWeight);\n font-size: var(--f-body-01-fontSize);\n line-height: var(--f-body-01-lineHeight);\n letter-spacing: var(--f-body-01-letterSpacing);\n}\n.f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n}\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n.f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n}\n.f-ui-02-light {\n font-family: var(--f-ui-02-light-fontFamily);\n font-weight: var(--f-ui-02-light-fontWeight);\n font-size: var(--f-ui-02-light-fontSize);\n line-height: var(--f-ui-02-light-lineHeight);\n letter-spacing: var(--f-ui-02-light-letterSpacing);\n}\n.f-ui-03 {\n font-family: var(--f-ui-03-fontFamily);\n font-weight: var(--f-ui-03-fontWeight);\n font-size: var(--f-ui-03-fontSize);\n line-height: var(--f-ui-03-lineHeight);\n letter-spacing: var(--f-ui-03-letterSpacing);\n}\n.f-ui-03-light {\n font-family: var(--f-ui-03-light-fontFamily);\n font-weight: var(--f-ui-03-light-fontWeight);\n font-size: var(--f-ui-03-light-fontSize);\n line-height: var(--f-ui-03-light-lineHeight);\n letter-spacing: var(--f-ui-03-light-letterSpacing);\n}\n.f-ui-04 {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n.f-ui-05 {\n font-family: var(--f-ui-05-fontFamily);\n font-weight: var(--f-ui-05-fontWeight);\n font-size: var(--f-ui-05-fontSize);\n line-height: var(--f-ui-05-lineHeight);\n letter-spacing: var(--f-ui-05-letterSpacing);\n}\n.f-caption {\n font-family: var(--f-caption-fontFamily);\n font-weight: var(--f-caption-fontWeight);\n font-size: var(--f-caption-fontSize);\n line-height: var(--f-caption-lineHeight);\n letter-spacing: var(--f-caption-letterSpacing);\n}\n.f-display-01 {\n font-family: var(--f-display-01-fontFamily);\n font-weight: var(--f-display-01-fontWeight);\n font-size: var(--f-display-01-fontSize);\n line-height: var(--f-display-01-lineHeight);\n letter-spacing: var(--f-display-01-letterSpacing);\n}\n@media (min-width: 750px) {\n :root {\n --f-heading-01-fontSize: 48px;\n }\n}\n@media (min-width: 900px) {\n :root {\n --f-heading-01-fontSize: 72px;\n --f-heading-02-fontSize: 48px;\n --f-display-01-fontSize: 150px;\n }\n}\n@media (min-width: 1024px) {\n :root {\n --f-heading-01-fontSize: 83px;\n --f-heading-02-fontSize: 60px;\n --f-heading-03-fontSize: 42px;\n --f-heading-04-fontSize: 36px;\n }\n}\n.f-heading-01 b, .f-heading-01 strong {\n font-weight: var(--f-heading-01---bold-weight, bold);\n}\n.f-heading-02 b, .f-heading-02 strong {\n font-weight: var(--f-heading-02---bold-weight, bold);\n}\n.f-heading-03 b, .f-heading-03 strong {\n font-weight: var(--f-heading-03---bold-weight, bold);\n}\n.f-heading-04 b, .f-heading-04 strong {\n font-weight: var(--f-heading-04---bold-weight, bold);\n}\n.f-heading-05 b, .f-heading-05 strong {\n font-weight: var(--f-heading-05---bold-weight, bold);\n}\n.f-heading-06 b, .f-heading-06 strong {\n font-weight: var(--f-heading-06---bold-weight, bold);\n}\n.f-body-01 b, .f-body-01 strong {\n font-weight: var(--f-body-01---bold-weight, bold);\n}\n.f-body-02 b, .f-body-02 strong {\n font-weight: var(--f-body-02---bold-weight, bold);\n}\n.f-ui-01 b, .f-ui-01 strong {\n font-weight: var(--f-ui-01---bold-weight, bold);\n}\n.f-ui-02 b, .f-ui-02 strong {\n font-weight: var(--f-ui-02---bold-weight, bold);\n}\n.f-ui-02-light b, .f-ui-02-light strong {\n font-weight: var(--f-ui-02-light---bold-weight, bold);\n}\n.f-ui-03 b, .f-ui-03 strong {\n font-weight: var(--f-ui-03---bold-weight, bold);\n}\n.f-ui-03-light b, .f-ui-03-light strong {\n font-weight: var(--f-ui-03-light---bold-weight, bold);\n}\n.f-ui-04 b, .f-ui-04 strong {\n font-weight: var(--f-ui-04---bold-weight, bold);\n}\n.f-ui-05 b, .f-ui-05 strong {\n font-weight: var(--f-ui-05---bold-weight, bold);\n}\n.f-caption b, .f-caption strong {\n font-weight: var(--f-caption---bold-weight, bold);\n}\n.f-display-01 b, .f-display-01 strong {\n font-weight: var(--f-display-01---bold-weight, bold);\n}\n:root {\n --grey-100: #f8f8f8;\n --grey-200: #f2f2f2;\n --grey-300: #e6e6e6;\n --grey-400: #d8d8d8;\n --grey-500: #8c8c8c;\n --grey-600: #6e6e6e;\n --grey-700: #666666;\n --grey-800: #4d4d4d;\n --grey-900: #242424;\n --green-100: #eaffee;\n --green-200: #d3ffdc;\n --green-300: #9dffb4;\n --green-400: #63fb92;\n --green-500: #00e766;\n --green-600: #00c959;\n --green-700: #009d45;\n --green-800: #007734;\n --green-900: #004f23;\n --yellow-100: #fefee5;\n --yellow-200: #ffffcb;\n --yellow-300: #fdfdaa;\n --yellow-400: #ffff8b;\n --yellow-500: #ffff51;\n --yellow-600: #f3f30a;\n --yellow-700: #d7d72b;\n --yellow-800: #9a9a1e;\n --yellow-900: #636313;\n --orange-100: #fff4ee;\n --orange-200: #ffeade;\n --orange-300: #ffdcc5;\n --orange-400: #ffcca9;\n --orange-500: #ffb87e;\n --orange-600: #ffa543;\n --orange-700: #cb7f28;\n --orange-800: #995f1e;\n --orange-900: #653f14;\n --red-100: #feefef;\n --red-200: #ffe0e1;\n --red-300: #ffc7c9;\n --red-400: #ff9ea2;\n --red-500: #ff7a7f;\n --red-600: #ff4d68;\n --red-700: #d01111;\n --red-800: #a3001a;\n --red-900: #6f0011;\n --purple-100: #f9f3ff;\n --purple-200: #f4e8ff;\n --purple-300: #e9ceff;\n --purple-400: #ddb1ff;\n --purple-500: #d18fff;\n --purple-600: #c461ff;\n --purple-700: #af56e4;\n --purple-800: #8337b1;\n --purple-900: #3d1e4f;\n --blue-100: #eff0ff;\n --blue-200: #dee0ff;\n --blue-300: #caceff;\n --blue-400: #b2b8ff;\n --blue-500: #7a89f5;\n --blue-600: #2b69fc;\n --blue-700: #0034cb;\n --blue-800: #002799;\n --blue-900: #001a65;\n --cyan-100: #E0EEFF;\n --cyan-200: #D3E6FF;\n --cyan-300: #B5D8FF;\n --cyan-400: #92C8FF;\n --cyan-500: #6CBFFE;\n --cyan-600: #3FA9F5;\n --cyan-700: #267FBE;\n --cyan-800: #1F689B;\n --cyan-900: #15496D;\n --black: #000000;\n --white: #ffffff;\n --transparent: transparent;\n --current: currentColor;\n}\n.grid-layout {\n display: grid;\n grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);\n grid-gap: var(--inner-gutter);\n}\n.grid-col-span-2 {\n --container-grid-columns: 2;\n grid-column: span 2 / span 2;\n}\n.grid-col-span-3 {\n --container-grid-columns: 3;\n grid-column: span 3 / span 3;\n}\n.grid-col-span-4 {\n --container-grid-columns: 4;\n grid-column: span 4 / span 4;\n}\n.grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n}\n.grid-col-span-8 {\n --container-grid-columns: 8;\n grid-column: span 8 / span 8;\n}\n.grid-col-span-10 {\n --container-grid-columns: 10;\n grid-column: span 10 / span 10;\n}\n.grid-col-span-12 {\n --container-grid-columns: 12;\n grid-column: span 12 / span 12;\n}\n.grid-col-start-1 {\n grid-column-start: 1;\n}\n.grid-col-start-2 {\n grid-column-start: 2;\n}\n.grid-col-start-3 {\n grid-column-start: 3;\n}\n.grid-col-start-4 {\n grid-column-start: 4;\n}\n.grid-col-start-5 {\n grid-column-start: 5;\n}\n.grid-col-start-6 {\n grid-column-start: 6;\n}\n.grid-col-start-7 {\n grid-column-start: 7;\n}\n.grid-col-start-8 {\n grid-column-start: 8;\n}\n.grid-col-start-9 {\n grid-column-start: 9;\n}\n.grid-col-start-10 {\n grid-column-start: 10;\n}\n.grid-col-start-11 {\n grid-column-start: 11;\n}\n.grid-col-start-12 {\n grid-column-start: 12;\n}\n[class*=\"grid-line-\"] > * {\n position: relative;\n}\n[class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n}\n.grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n}\n@media (min-width: 750px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .md\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .md\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .md\\:grid-line-x-0 > *::before {\n content: none;\n }\n .md\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-y-0 > *::after {\n content: none;\n }\n .md\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .md\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .md\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .md\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .md\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .md\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .md\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .md\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .md\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .md\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .md\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .md\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .md\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .md\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .md\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .md\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .md\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .md\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .md\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .md\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .md\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .md\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .md\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .md\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .md\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .md\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .md\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .md\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .md\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .md\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .md\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .md\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .md\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .md\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .md\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .md\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .md\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .md\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .md\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .md\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .md\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .md\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .md\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .md\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .md\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .md\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .md\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .md\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .md\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .md\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .md\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .md\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .md\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .md\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .md\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .md\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .md\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .md\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .md\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .md\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .md\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .md\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .md\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .md\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .md\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .md\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .md\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .md\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .md\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .md\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .md\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .md\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .md\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .md\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .md\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .md\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .md\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .md\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .md\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .md\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .md\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .md\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .md\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .md\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .md\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .md\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .md\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .md\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .md\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .md\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .md\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .md\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .md\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .md\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .md\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .md\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .md\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .md\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .md\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .md\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .md\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .md\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .md\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .md\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 900px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .lg\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .lg\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .lg\\:grid-line-x-0 > *::before {\n content: none;\n }\n .lg\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-y-0 > *::after {\n content: none;\n }\n .lg\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .lg\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .lg\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .lg\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .lg\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .lg\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .lg\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .lg\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .lg\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .lg\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .lg\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .lg\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .lg\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .lg\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .lg\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .lg\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .lg\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .lg\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .lg\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .lg\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .lg\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .lg\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .lg\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .lg\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .lg\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .lg\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .lg\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .lg\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .lg\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .lg\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .lg\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .lg\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .lg\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .lg\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .lg\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .lg\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .lg\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .lg\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .lg\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .lg\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .lg\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .lg\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .lg\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .lg\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .lg\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .lg\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .lg\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .lg\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .lg\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .lg\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .lg\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .lg\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .lg\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .lg\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .lg\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .lg\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .lg\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .lg\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .lg\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .lg\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .lg\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .lg\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .lg\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .lg\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .lg\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .lg\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .lg\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .lg\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .lg\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .lg\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .lg\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .lg\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .lg\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .lg\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .lg\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .lg\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .lg\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .lg\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .lg\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .lg\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .lg\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .lg\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .lg\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .lg\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .lg\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .lg\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .lg\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .lg\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .lg\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .lg\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .lg\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .lg\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .lg\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .lg\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .lg\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .lg\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .lg\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .lg\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .lg\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .lg\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .lg\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .lg\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .lg\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .lg\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 1024px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 1280px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xxl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xxl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xxl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xxl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xxl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xxl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xxl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xxl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xxl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xxl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xxl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xxl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xxl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xxl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xxl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xxl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xxl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xxl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xxl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xxl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xxl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xxl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xxl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xxl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xxl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xxl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xxl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xxl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xxl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xxl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xxl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xxl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xxl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xxl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xxl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xxl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xxl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xxl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xxl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xxl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xxl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xxl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xxl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xxl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xxl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xxl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xxl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xxl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xxl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xxl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xxl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xxl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xxl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xxl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xxl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xxl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xxl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xxl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xxl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xxl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xxl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xxl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xxl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xxl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xxl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xxl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xxl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xxl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xxl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xxl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xxl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xxl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xxl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xxl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xxl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xxl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xxl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xxl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xxl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xxl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xxl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xxl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xxl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 2200px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xxxl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxxl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxxl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xxxl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xxxl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xxxl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xxxl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xxxl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xxxl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xxxl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xxxl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xxxl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xxxl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xxxl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xxxl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xxxl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xxxl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xxxl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xxxl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xxxl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xxxl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xxxl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xxxl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xxxl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xxxl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xxxl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xxxl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xxxl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xxxl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xxxl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xxxl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xxxl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xxxl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xxxl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xxxl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xxxl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xxxl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xxxl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xxxl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xxxl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xxxl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xxxl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xxxl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xxxl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xxxl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xxxl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xxxl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xxxl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xxxl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xxxl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xxxl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xxxl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xxxl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xxxl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xxxl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xxxl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xxxl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xxxl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xxxl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xxxl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xxxl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xxxl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xxxl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xxxl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xxxl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xxxl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xxxl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xxxl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xxxl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xxxl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xxxl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xxxl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xxxl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xxxl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xxxl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xxxl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xxxl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xxxl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xxxl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xxxl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xxxl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xxxl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xxxl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xxxl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xxxl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxxl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxxl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxxl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxxl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxxl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxxl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxxl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxxl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxxl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxxl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxxl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n.cols-container > .ml-0 {\n margin-left: 0;\n}\n.w-12-cols {\n width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n}\n.cols-container > .w-12-cols {\n width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n}\n.w-12-cols > * {\n --container-grid-columns: 12;\n}\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1 );\n }\n\n &::after {\n content: '';\n }\n}\n.border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n &::after {\n content: '';\n }\n }\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n &::after {\n content: '';\n }\n }\n.input-label-options {\n font-family: var(--f-ui-03-fontFamily);\n font-size: var(--f-ui-03-fontSize);\n line-height: var(--f-ui-03-lineHeight);\n letter-spacing: var(--f-ui-03-letterSpacing);\n}\n.input-label {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n.input-label b,.input-label strong {\n font-weight: var(--f-ui-04---bold-weight, bold);\n}\n.input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: flex;\n min-height: 2.5rem;\n width: 100%;\n align-items: center;\n padding-top: 10px;\n padding-bottom: 10px;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n border-radius: 8px;\n border-width: 2px;\n border-color: rgba(0, 0, 0, .1 );\n}\n.input:hover {\n border-color: var(--black);\n}\n.input:active {\n border-color: var(--black);\n}\n.input {\n font-family: var(--f-ui-02-light-fontFamily);\n font-weight: var(--f-ui-02-light-fontWeight);\n font-size: var(--f-ui-02-light-fontSize);\n line-height: var(--f-ui-02-light-lineHeight);\n letter-spacing: var(--f-ui-02-light-letterSpacing);\n}\n.input b,.input strong {\n font-weight: var(--f-ui-02-light---bold-weight, bold);\n}\n.input::-moz-placeholder {\n color: var(--grey-500);\n}\n.input::placeholder {\n color: var(--grey-500);\n}\n.input {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n.input:focus-visible {\n outline-style: solid;\n}\n.input:disabled {\n cursor: not-allowed;\n background-color: var(--grey-300);\n color: var(--grey-500);\n}\n.input:disabled:hover {\n border-color: rgba(0, 0, 0, .1 );\n}\n.input:disabled:active {\n border-color: rgba(0, 0, 0, .1 );\n}\n.input-with-icon {\n padding-right: 34px;\n}\n.input-checkbox {\n position: relative;\n height: 1rem;\n min-height: auto;\n width: 1rem;\n padding: 0rem;\n border-radius: 4px;\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-checkbox::after {\n --tw-content: '';\n content: var(--tw-content);\n position: absolute;\n top: 0rem;\n left: 50%;\n --tw-translate-x: -50%;\n height: 10px;\n width: 6px;\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n border-bottom-width: 2px;\n border-right-width: 2px;\n border-color: var(--transparent);\n}\n.input-checkbox:checked {\n border-color: var(--black);\n background-color: var(--black);\n}\n.input-checkbox:checked::after {\n border-color: var(--white);\n}\n.input-checkbox:checked:disabled {\n border-color: rgba(0, 0, 0, .15 );\n background-color: var(--grey-300);\n}\n.input-checkbox:checked:disabled::after {\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-radio {\n position: relative;\n height: 1rem;\n min-height: auto;\n width: 1rem;\n padding: 0rem;\n border-radius: 9999px;\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-radio::after {\n --tw-content: '';\n content: var(--tw-content);\n position: absolute;\n top: 50%;\n left: 50%;\n --tw-translate-x: -50%;\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n height: 6px;\n width: 6px;\n border-radius: 9999px;\n background-color: var(--transparent);\n}\n.input-radio:checked {\n border-color: var(--black);\n background-color: var(--black);\n}\n.input-radio:checked::after {\n background-color: var(--white);\n}\n.input-radio:checked:disabled::after {\n background-color: var(--white);\n}\n.input-error {\n border-color: var(--red-700);\n}\n.input-counter {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n color: var(--grey-500);\n\n &.input-counter-error {\n color: var(--red-700);\n }\n}\ninput[type=\"range\"]::-webkit-slider-thumb {\n height: 1.5rem;\n width: 1.5rem;\n border-radius: 9999px;\n outline: 2px solid var(--green-400); /* This adds an outline */\n background-color: var(--green-500);\n -webkit-appearance: none;\n appearance: none; /* Ensure the thumb can be styled */\n}\n.loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n}\n.scroller-x {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.scroller-x::-webkit-scrollbar {\n display: none;\n}\n.scroller-x {\n overflow: auto;\n overscroll-behavior-x: contain;\n}\n/** region TRANSITIONS */\n.effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-background {\n transition-property: background;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-height {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-property: height;\n}\n.effect-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n/** endregion */\n/* region FOCUS */\n.effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n.effect-focus:focus-visible {\n outline-style: solid;\n}\n.effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n.effect-focus-within:focus-within {\n outline-style: solid;\n}\n/* endregion */\n/* region BG */\n.effect-bg-pattern {\n position: relative;\n z-index: 1;\n\n &::before {\n position: absolute;\n content: '';\n z-index: -1;\n inset: 0;\n background-color: rgba(208, 208, 208, 0.75);\n opacity: 0.75;\n background-image: repeating-linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5), repeating-linear-gradient(45deg, #F5F5F5 25%, #D0D0D0 25%, #D0D0D0 75%, #F5F5F5 75%, #F5F5F5);\n background-position: 0 0, 8px 8px;\n background-size: 16px 16px;\n }\n }\n.effect-bg-behind {\n position: relative;\n}\n.effect-bg-behind::before {\n position: absolute;\n inset: 0rem;\n z-index: -1;\n --tw-content: '';\n content: var(--tw-content);\n}\n.effect-bg-behind {\n\n &:before {\n background-size: calc(100% + 6px) calc(100% + 6px) !important;\n background-position: -4px -4px !important;\n background-repeat: no-repeat !important;\n }\n }\n.effect-bg-behind-link {\n position: relative;\n}\n.effect-bg-behind-link::before {\n position: absolute;\n top: 0rem;\n bottom: 0rem;\n left: -0.5rem;\n right: 0rem;\n z-index: 0;\n border-radius: 8px;\n background-color: var(--grey-400);\n --tw-content: '';\n content: var(--tw-content);\n}\n.effect-bg-behind-link[aria-disabled=\"true\"]::before {\n background-color: var(--transparent);\n}\n/* endregion */\n/*region shadow*/\n/*endregion*/\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n.pointer-events-none {\n pointer-events: none;\n}\n.visible {\n visibility: visible;\n}\n.collapse {\n visibility: collapse;\n}\n.static {\n position: static;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.inset-0 {\n inset: 0rem;\n}\n.inset-x-16 {\n left: 1rem;\n right: 1rem;\n}\n.-top-1 {\n top: -0.0625rem;\n}\n.bottom-0 {\n bottom: 0rem;\n}\n.bottom-20 {\n bottom: 1.25rem;\n}\n.bottom-4 {\n bottom: 0.25rem;\n}\n.bottom-8 {\n bottom: 0.5rem;\n}\n.left-0 {\n left: 0rem;\n}\n.left-1\\/2 {\n left: 50%;\n}\n.left-20 {\n left: 1.25rem;\n}\n.left-4 {\n left: 0.25rem;\n}\n.left-\\[4px\\] {\n left: 4px;\n}\n.right-0 {\n right: 0rem;\n}\n.right-20 {\n right: 1.25rem;\n}\n.right-4 {\n right: 0.25rem;\n}\n.right-8 {\n right: 0.5rem;\n}\n.right-\\[4px\\] {\n right: 4px;\n}\n.right-\\[6px\\] {\n right: 6px;\n}\n.top-0 {\n top: 0rem;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.top-16 {\n top: 1rem;\n}\n.top-20 {\n top: 1.25rem;\n}\n.top-full {\n top: 100%;\n}\n.z-0 {\n z-index: 0;\n}\n.z-1 {\n z-index: 1;\n}\n.z-10 {\n z-index: 10;\n}\n.z-50 {\n z-index: 50;\n}\n.z-\\[1\\] {\n z-index: 1;\n}\n.z-\\[999999\\] {\n z-index: 999999;\n}\n.z-focus {\n z-index: 99;\n}\n.z-on-top {\n z-index: 99999;\n}\n.order-first {\n order: -9999;\n}\n.order-last {\n order: 9999;\n}\n.m-0 {\n margin: 0rem;\n}\n.m-32 {\n margin: 2rem;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.my-16 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.my-20 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n.my-4 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n.my-8 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.-ml-16 {\n margin-left: -1rem;\n}\n.-mr-16 {\n margin-right: -1rem;\n}\n.mb-10 {\n margin-bottom: 0.625rem;\n}\n.mb-12 {\n margin-bottom: 0.75rem;\n}\n.mb-28 {\n margin-bottom: 1.75rem;\n}\n.mb-4 {\n margin-bottom: 0.25rem;\n}\n.ml-0 {\n margin-left: 0rem;\n}\n.ml-4 {\n margin-left: 0.25rem;\n}\n.ml-64 {\n margin-left: 4rem;\n}\n.ml-8 {\n margin-left: 0.5rem;\n}\n.ml-auto {\n margin-left: auto;\n}\n.mr-4 {\n margin-right: 0.25rem;\n}\n.mr-8 {\n margin-right: 0.5rem;\n}\n.mr-auto {\n margin-right: auto;\n}\n.mt-12 {\n margin-top: 0.75rem;\n}\n.mt-16 {\n margin-top: 1rem;\n}\n.mt-2 {\n margin-top: 0.125rem;\n}\n.mt-20 {\n margin-top: 1.25rem;\n}\n.mt-28 {\n margin-top: 1.75rem;\n}\n.mt-32 {\n margin-top: 2rem;\n}\n.mt-4 {\n margin-top: 0.25rem;\n}\n.mt-6 {\n margin-top: 0.375rem;\n}\n.mt-8 {\n margin-top: 0.5rem;\n}\n.mt-auto {\n margin-top: auto;\n}\n.line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n}\n.line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n}\n.line-clamp-4 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 4;\n}\n.block {\n display: block;\n}\n.inline-block {\n display: inline-block;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.hidden {\n display: none;\n}\n.aspect-16x9 {\n aspect-ratio: 16/9;\n}\n.aspect-1x1 {\n aspect-ratio: 1/1;\n}\n.aspect-21x9 {\n aspect-ratio: 21/9;\n}\n.aspect-3x2 {\n aspect-ratio: 3/2;\n}\n.aspect-4x3 {\n aspect-ratio: 4/3;\n}\n.aspect-4x5 {\n aspect-ratio: 4/5;\n}\n.h-0 {\n height: 0rem;\n}\n.h-12 {\n height: 0.75rem;\n}\n.h-16 {\n height: 1rem;\n}\n.h-2 {\n height: 0.125rem;\n}\n.h-20 {\n height: 1.25rem;\n}\n.h-24 {\n height: 1.5rem;\n}\n.h-28 {\n height: 1.75rem;\n}\n.h-32 {\n height: 2rem;\n}\n.h-36 {\n height: 2.25rem;\n}\n.h-4 {\n height: 0.25rem;\n}\n.h-40 {\n height: 2.5rem;\n}\n.h-44 {\n height: 2.75rem;\n}\n.h-48 {\n height: 3rem;\n}\n.h-64 {\n height: 4rem;\n}\n.h-8 {\n height: 0.5rem;\n}\n.h-96 {\n height: 6rem;\n}\n.h-\\[85px\\] {\n height: 85px;\n}\n.h-auto {\n height: auto;\n}\n.h-full {\n height: 100%;\n}\n.\\!min-h-20 {\n min-height: 1.25rem !important;\n}\n.min-h-156 {\n min-height: 156px;\n}\n.min-h-36 {\n min-height: 2.25rem;\n}\n.min-h-44 {\n min-height: 2.75rem;\n}\n.min-h-56 {\n min-height: 3.5rem;\n}\n.min-h-80 {\n min-height: 5rem;\n}\n.min-h-\\[150px\\] {\n min-height: 150px;\n}\n.min-h-\\[225px\\] {\n min-height: 225px;\n}\n.min-h-\\[90px\\] {\n min-height: 90px;\n}\n.min-h-full {\n min-height: 100%;\n}\n.min-h-screen {\n min-height: 100vh;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-20 {\n width: 1.25rem;\n}\n.w-28 {\n width: 1.75rem;\n}\n.w-32 {\n width: 2rem;\n}\n.w-4 {\n width: 0.25rem;\n}\n.w-44 {\n width: 2.75rem;\n}\n.w-\\[200px\\] {\n width: 200px;\n}\n.w-\\[300px\\] {\n width: 300px;\n}\n.w-\\[54px\\] {\n width: 54px;\n}\n.w-auto {\n width: auto;\n}\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.w-full {\n width: 100%;\n}\n.min-w-\\[200px\\] {\n min-width: 200px;\n}\n.min-w-\\[210px\\] {\n min-width: 210px;\n}\n.min-w-\\[250px\\] {\n min-width: 250px;\n}\n.min-w-\\[280px\\] {\n min-width: 280px;\n}\n.max-w-120 {\n max-width: 120px;\n}\n.max-w-full {\n max-width: 100%;\n}\n.max-w-sidebar {\n max-width: 1224px;\n}\n.max-w-xxxl {\n max-width: 2200px;\n}\n.flex-none {\n flex: none;\n}\n.grow {\n flex-grow: 1;\n}\n.-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.resize {\n resize: both;\n}\n.appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.grid-cols-10 {\n grid-template-columns: repeat(10, minmax(0, 1fr));\n}\n.grid-cols-11 {\n grid-template-columns: repeat(11, minmax(0, 1fr));\n}\n.grid-cols-12 {\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n}\n.grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr));\n}\n.grid-cols-7 {\n grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n.grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n}\n.grid-cols-9 {\n grid-template-columns: repeat(9, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-1 {\n gap: 0.0625rem;\n}\n.gap-12 {\n gap: 0.75rem;\n}\n.gap-20 {\n gap: 1.25rem;\n}\n.gap-4 {\n gap: 0.25rem;\n}\n.gap-x-12 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n.gap-x-16 {\n -moz-column-gap: 1rem;\n column-gap: 1rem;\n}\n.gap-x-2 {\n -moz-column-gap: 0.125rem;\n column-gap: 0.125rem;\n}\n.gap-x-4 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem;\n}\n.gap-x-8 {\n -moz-column-gap: 0.5rem;\n column-gap: 0.5rem;\n}\n.gap-y-12 {\n row-gap: 0.75rem;\n}\n.gap-y-16 {\n row-gap: 1rem;\n}\n.gap-y-4 {\n row-gap: 0.25rem;\n}\n.gap-y-8 {\n row-gap: 0.5rem;\n}\n.space-x-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.0625rem * var(--tw-space-x-reverse));\n margin-left: calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-12 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.space-y-16 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-x-auto {\n overflow-x: auto;\n}\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.text-ellipsis {\n text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.break-words {\n overflow-wrap: break-word;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 16px;\n}\n.rounded-md {\n border-radius: 12px;\n}\n.rounded-pill {\n border-radius: 100px;\n}\n.rounded-sm {\n border-radius: 8px;\n}\n.rounded-xs {\n border-radius: 4px;\n}\n.rounded-xxs {\n border-radius: 2px;\n}\n.rounded-t-lg {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n.rounded-tl-lg {\n border-top-left-radius: 16px;\n}\n.rounded-tr-lg {\n border-top-right-radius: 16px;\n}\n.border {\n border-width: 1px;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-3 {\n border-width: 3px;\n}\n.border-b-2 {\n border-bottom-width: 2px;\n}\n.border-l-0 {\n border-left-width: 0px;\n}\n.border-r-0 {\n border-right-width: 0px;\n}\n.border-t-2 {\n border-top-width: 2px;\n}\n.border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n.border-\\[\\#d2d2d2\\] {\n --tw-border-opacity: 1;\n border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n.border-accent {\n border-color: var(--green-500);\n}\n.border-current {\n border-color: currentColor;\n}\n.border-default {\n border-color: var(--black);\n}\n.border-error {\n border-color: var(--red-700);\n}\n.border-inverse {\n border-color: var(--white);\n}\n.border-inverse-soft {\n border-color: rgba(255, 255, 255, 0.3);\n}\n.border-inverse-softer {\n border-color: rgba(255, 255, 255, 0.15);\n}\n.border-soft {\n border-color: rgba(0, 0, 0, .15 );\n}\n.border-softer {\n border-color: rgba(0, 0, 0, .1 );\n}\n.border-softest {\n border-color: rgba(0, 0, 0, .05 );\n}\n.border-transparent {\n border-color: var(--transparent);\n}\n.border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1 );\n}\n.\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n}\n.\\!bg-darker {\n background-color: var(--grey-400) !important;\n}\n.\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n}\n.bg-accent {\n background-color: var(--green-500);\n}\n.bg-accent-dark {\n background-color: var(--green-600);\n}\n.bg-accent-darker {\n background-color: var(--green-800);\n}\n.bg-current {\n background-color: currentColor;\n}\n.bg-dark {\n background-color: var(--grey-300);\n}\n.bg-darker {\n background-color: var(--grey-400);\n}\n.bg-default {\n background-color: var(--grey-200);\n}\n.bg-error {\n background-color: var(--red-200);\n}\n.bg-inverse {\n background-color: var(--white);\n}\n.bg-inverse-soft {\n background-color: rgba(255, 255, 255, .2);\n}\n.bg-inverse-softer {\n background-color: rgba(255, 255, 255, .15);\n}\n.bg-on-dark {\n background-color: rgba(255, 255, 255, 0.2);\n}\n.bg-on-gradient {\n background-color: rgba(0, 0, 0, 0.1);\n}\n.bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n}\n.bg-strong {\n background-color: var(--grey-700);\n}\n.bg-strong-dark {\n background-color: var(--grey-800);\n}\n.bg-stronger {\n background-color: var(--grey-900);\n}\n.bg-strongest {\n background-color: var(--black);\n}\n.bg-strongest-soft {\n background-color: rgba(0, 0, 0, .05);\n}\n.bg-success {\n background-color: var(--green-200);\n}\n.bg-transparent {\n background-color: var(--transparent);\n}\n.bg-warning {\n background-color: var(--yellow-200);\n}\n.bg-opacity-90 {\n --tw-bg-opacity: 0.9;\n}\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n.object-center {\n -o-object-position: center;\n object-position: center;\n}\n.\\!p-8 {\n padding: 0.5rem !important;\n}\n.p-0 {\n padding: 0rem;\n}\n.p-12 {\n padding: 0.75rem;\n}\n.p-16 {\n padding: 1rem;\n}\n.p-2 {\n padding: 0.125rem;\n}\n.p-20 {\n padding: 1.25rem;\n}\n.p-32 {\n padding: 2rem;\n}\n.p-4 {\n padding: 0.25rem;\n}\n.p-6 {\n padding: 0.375rem;\n}\n.p-8 {\n padding: 0.5rem;\n}\n.\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n}\n.\\!py-0 {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n}\n.\\!py-4 {\n padding-top: 0.25rem !important;\n padding-bottom: 0.25rem !important;\n}\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-2 {\n padding-left: 0.125rem;\n padding-right: 0.125rem;\n}\n.px-20 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.px-4 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-6 {\n padding-left: 0.375rem;\n padding-right: 0.375rem;\n}\n.py-1 {\n padding-top: 0.0625rem;\n padding-bottom: 0.0625rem;\n}\n.py-12 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.py-16 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-20 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n.py-4 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-6 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.pb-16 {\n padding-bottom: 1rem;\n}\n.pb-20 {\n padding-bottom: 1.25rem;\n}\n.pb-28 {\n padding-bottom: 1.75rem;\n}\n.pb-60 {\n padding-bottom: 3.75rem;\n}\n.pb-8 {\n padding-bottom: 0.5rem;\n}\n.pl-12 {\n padding-left: 0.75rem;\n}\n.pl-28 {\n padding-left: 1.75rem;\n}\n.pl-32 {\n padding-left: 2rem;\n}\n.pl-36 {\n padding-left: 2.25rem;\n}\n.pl-4 {\n padding-left: 0.25rem;\n}\n.pl-8 {\n padding-left: 0.5rem;\n}\n.pr-12 {\n padding-right: 0.75rem;\n}\n.pr-28 {\n padding-right: 1.75rem;\n}\n.pr-32 {\n padding-right: 2rem;\n}\n.pr-4 {\n padding-right: 0.25rem;\n}\n.pr-8 {\n padding-right: 0.5rem;\n}\n.pt-12 {\n padding-top: 0.75rem;\n}\n.pt-20 {\n padding-top: 1.25rem;\n}\n.pt-28 {\n padding-top: 1.75rem;\n}\n.pt-32 {\n padding-top: 2rem;\n}\n.pt-40 {\n padding-top: 2.5rem;\n}\n.pt-48 {\n padding-top: 3rem;\n}\n.pt-8 {\n padding-top: 0.5rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.lowercase {\n text-transform: lowercase;\n}\n.\\!text-current {\n color: currentColor !important;\n}\n.text-\\[\\#0034CB\\] {\n --tw-text-opacity: 1;\n color: rgb(0 52 203 / var(--tw-text-opacity));\n}\n.text-accent {\n color: var(--green-500);\n}\n.text-current {\n color: currentColor;\n}\n.text-default {\n color: var(--black);\n}\n.text-error {\n color: var(--red-700);\n}\n.text-extra-light {\n color: var(--grey-300);\n}\n.text-inverse {\n color: var(--white);\n}\n.text-light {\n color: var(--grey-700);\n}\n.text-lighter {\n color: var(--grey-600);\n}\n.text-lightest {\n color: var(--grey-500);\n}\n.text-on-gradient {\n color: rgba(0, 0, 0, 0.55);\n}\n.text-success {\n color: var(--green-800);\n}\n.text-transparent {\n color: var(--transparent);\n}\n.text-warning {\n color: var(--yellow-900);\n}\n.underline {\n text-decoration-line: underline;\n}\n.\\!no-underline {\n text-decoration-line: none !important;\n}\n.decoration-\\[\\#0034CB\\] {\n text-decoration-color: #0034CB;\n}\n.decoration-accent {\n text-decoration-color: var(--green-500);\n}\n.decoration-2 {\n text-decoration-thickness: 2px;\n}\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-small {\n --tw-shadow: 0px 1.5px 2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0px 1.5px 2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.outline {\n outline-style: solid;\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur {\n --tw-backdrop-blur: blur(8px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n[class*=\"keyline-\"] {\n position: relative;\n}\n[class*=\"keyline-\"]::before {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n inset-inline-start: calc(var(--inner-gutter) / -2 - 1px);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border: 1px solid transparent;\n pointer-events: none;\n}\n[class*=\"keyline-0\"]::before {\n border-inline-end-color: transparent;\n border-inline-start-color: transparent;\n}\n.ratio {\n --ratio: 100%;\n display: block;\n position: relative;\n overflow: hidden;\n}\n.ratio::before {\n content: attr(👻);\n display: block;\n width: 100%;\n height: 0;\n padding-bottom: var(--ratio);\n}\n.ratio > [class*=\"ratio-content\"] {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n}\n[class*=underline-] {\n text-decoration-line: underline;\n}\n.underline-offset-4 {\n text-underline-offset: 0.2em;\n}\n.\\@container {\n container-type: inline-size;\n}\n.bg-gradient-01-top {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n }\n.bg-gradient-01-bottom {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n }\n.bg-gradient-02-top {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n }\n.bg-gradient-02-bottom {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n }\n.bg-gradient-03-top {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n }\n.bg-gradient-03-bottom {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n }\n.bg-gradient-04-top {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n }\n.bg-gradient-04-bottom {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n }\n.after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.before\\:effect-opacity::before {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n@media (min-width: 750px) {\n .md\\:grid-col-span-4 {\n --container-grid-columns: 4;\n grid-column: span 4 / span 4;\n }\n .md\\:grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n }\n .md\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .md\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .md\\:w-10-cols > * {\n --container-grid-columns: 10;\n }\n}\n@media (min-width: 900px) {\n .lg\\:grid-col-span-5 {\n --container-grid-columns: 5;\n grid-column: span 5 / span 5;\n }\n .lg\\:grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n }\n .lg\\:grid-col-start-7 {\n grid-column-start: 7;\n }\n .lg\\:w-8-cols {\n width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .lg\\:w-8-cols {\n width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .lg\\:w-8-cols > * {\n --container-grid-columns: 8;\n }\n .lg\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .lg\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .lg\\:w-10-cols > * {\n --container-grid-columns: 10;\n }\n}\n.even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n}\n.invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n}\n.focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n}\n.hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n}\n.hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n}\n.hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n}\n.hover\\:bg-default:hover {\n background-color: var(--grey-200);\n}\n.hover\\:bg-inverse:hover {\n background-color: var(--white);\n}\n.hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n}\n.hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n}\n.hover\\:text-default:hover {\n color: var(--black);\n}\n.hover\\:text-lighter:hover {\n color: var(--grey-600);\n}\n.hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n}\n.hover\\:no-underline:hover {\n text-decoration-line: none;\n}\n.hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus-visible\\:rounded-xs:focus-visible {\n border-radius: 4px;\n}\n.focus-visible\\:text-default:focus-visible {\n color: var(--black);\n}\n.focus-visible\\:outline-none:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n.disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n}\n.disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n}\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n}\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n}\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n}\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n}\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n}\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n}\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n}\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n}\n.after\\:absolute::after {\n position: absolute;\n}\n.after\\:inset-0::after {\n inset: 0rem;\n}\n.after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n}\n.after\\:bottom-0::after {\n bottom: 0rem;\n}\n.after\\:left-16::after {\n left: 1rem;\n}\n.after\\:right-16::after {\n right: 1rem;\n}\n.after\\:z-10::after {\n z-index: 10;\n}\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n.after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n.after\\:border-3::after {\n border-width: 3px;\n}\n.after\\:border-b-2::after {\n border-bottom-width: 2px;\n}\n.after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n}\n.after\\:border-accent::after {\n border-color: var(--green-500);\n}\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05 );\n}\n.after\\:opacity-0::after {\n opacity: 0;\n}\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n.hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n}\n.hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n}\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n}\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n}\n.before\\:absolute::before {\n position: absolute;\n}\n.before\\:inset-x-0::before {\n left: 0rem;\n right: 0rem;\n}\n.before\\:-bottom-2::before {\n bottom: -0.125rem;\n}\n.before\\:bottom-0::before {\n bottom: 0rem;\n}\n.before\\:h-12::before {\n height: 0.75rem;\n}\n.before\\:h-3::before {\n height: 0.1875rem;\n}\n.before\\:rounded-lg::before {\n border-radius: 16px;\n}\n.before\\:border-2::before {\n border-width: 2px;\n}\n.before\\:border-softest::before {\n border-color: rgba(0, 0, 0, .05 );\n}\n.before\\:bg-default::before {\n background-color: var(--grey-200);\n}\n.before\\:bg-inverse-softer::before {\n background-color: rgba(255, 255, 255, .15);\n}\n.before\\:\\!opacity-100::before {\n opacity: 1 !important;\n}\n.before\\:opacity-0::before {\n opacity: 0;\n}\n.before\\:opacity-5::before {\n opacity: 0.05;\n}\n.before\\:content-\\[\\'\\'\\]::before {\n --tw-content: '';\n content: var(--tw-content);\n}\n.before\\:bg-gradient-y::before {\n background: linear-gradient(to bottom, transparent, ease-in-out, black);\n }\n.before\\:bg-gradient-01-top::before {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-01-bottom::before {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-02-top::before {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-02-bottom::before {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-03-top::before {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-03-bottom::before {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-04-top::before {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-04-bottom::before {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n }\n.hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n}\n.focus-visible\\:before\\:\\!opacity-0:focus-visible::before {\n opacity: 0 !important;\n}\n.focus-visible\\:before\\:opacity-0:focus-visible::before {\n opacity: 0;\n}\n@container (min-width: 46.875rem) {\n .\\@md\\:max-w-192 {\n max-width: 192px;\n }\n}\n@media (min-width: 0px) {\n .sm\\:mb-4 {\n margin-bottom: 0.25rem;\n }\n .sm\\:max-w-\\[200px\\] {\n max-width: 200px;\n }\n}\n@media (min-width: 750px) {\n .md\\:left-1\\/2 {\n left: 50%;\n }\n .md\\:flex {\n display: flex;\n }\n .md\\:hidden {\n display: none;\n }\n .md\\:w-\\[300px\\] {\n width: 300px;\n }\n .md\\:-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .md\\:-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .md\\:gap-y-12 {\n row-gap: 0.75rem;\n }\n .md\\:pt-28 {\n padding-top: 1.75rem;\n }\n}\n@media (min-width: 900px) {\n .lg\\:order-last {\n order: 9999;\n }\n .lg\\:order-none {\n order: 0;\n }\n .lg\\:mt-0 {\n margin-top: 0rem;\n }\n .lg\\:block {\n display: block;\n }\n .lg\\:flex {\n display: flex;\n }\n .lg\\:hidden {\n display: none;\n }\n .lg\\:w-\\[500px\\] {\n width: 500px;\n }\n .lg\\:w-auto {\n width: auto;\n }\n .lg\\:max-w-\\[720px\\] {\n max-width: 720px;\n }\n .lg\\:flex-row {\n flex-direction: row;\n }\n .lg\\:flex-nowrap {\n flex-wrap: nowrap;\n }\n .lg\\:gap-y-16 {\n row-gap: 1rem;\n }\n .lg\\:px-28 {\n padding-left: 1.75rem;\n padding-right: 1.75rem;\n }\n .lg\\:\\!pl-12 {\n padding-left: 0.75rem !important;\n }\n .lg\\:\\!pr-12 {\n padding-right: 0.75rem !important;\n }\n}\n@media (min-width: 1024px) {\n .xl\\:pb-40 {\n padding-bottom: 2.5rem;\n }\n}\n@media (min-width: 2200px) {\n .xxxl\\:px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n }\n}\n\n";const EdsInputFieldStyle0=edsInputFieldCss;const EdsInputField=class{constructor(hostRef){registerInstance(this,hostRef);this.edsinput=createEvent(this,"edsinput",7);this.edschange=createEvent(this,"edschange",7);this.handleNativeInput=ev=>{var _a,_b;(_a=this.onInput)===null||_a===void 0?void 0:_a.call(this,ev);if(this.shouldEmitValue()){const target=ev.target;let value=target.value;if(this.type==='checkbox'&&((_b=this.parsedOptions)===null||_b===void 0?void 0:_b.length)>0){// checkbox group case
|
|
949
|
+
`,"aria-invalid":this.error?'true':'false',"aria-describedby":describedBy,maxlength:this.maxLength,onInput:this.handleInput,onChange:this.handleInput})),this.maxLength&&this.type==='textarea'&&h("span",{key:'cc6cc50cdebea1d4eaecb78bc6ab2b4b92503893',class:`input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached?'input-counter-error':''}`},this.maxLength),this.icon&&h("eds-icon-wrapper",{key:'ff4b36e873438f7208eb660c77381f87f0805109',class:`absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled?'text-lightest':'text-lightest'}`,icon:this.icon}));}get el(){return getElement(this);}static get watchers(){return {"value":["onValueChanged"]};}};const edsInputFieldCss=":root {\n font-optical-sizing: auto;\n}\nhtml,\nbody {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n/*\n:focus[data-focus-method=\"mouse\"],\n:focus[data-focus-method=\"touch\"] {\n outline: none !important;\n}\n*/\n/*FADE*/\n.fade-enter-active,\n.fade-leave-active {\n transition-duration: 300ms;\n transition-timing-function: linear;\n transition-property: opacity;\n}\n.fade-enter-from,\n.fade-leave-to {\n opacity: 0;\n}\n/*FADE TRANSLATE Y*/\n.fade-down-enter-active,\n.fade-down-leave-active {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n transition-property: opacity, transform;\n}\n.fade-down-enter-from,\n.fade-down-leave-to {\n opacity: 0;\n transform: translateY(12px);\n}\n/*SLIDE LEFT*/\n.slide-left-enter-active,\n.slide-left-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n transition-property: opacity, transform;\n}\n.slide-left-enter-from,\n.slide-left-leave-to {\n transform: translateX(-110%);\n}\n/*SLIDE BOTTOM*/\n.slide-bottom-enter-active,\n.slide-bottom-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n transition-property: opacity, transform;\n}\n.slide-bottom-enter-from,\n.slide-bottom-leave-to {\n transform: translateY(100%);\n}\n.slide-bottom-list-move,\n.slide-bottom-list-enter-active,\n.slide-bottom-list-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-property: opacity, transform;\n}\n.slide-bottom-list-enter-from,\n.slide-bottom-list-leave-to {\n opacity: 0;\n transform: translateY(100%);\n}\n.slide-bottom-list-leave-active {\n position: absolute;\n}\n/*COLLAPSE Y*/\n.collapseY-enter-active,\n.collapseY-leave-active {\n transition-duration: 300ms;\n transition-timing-function: linear;\n overflow: hidden;\n max-height: 500px;\n transition-property: max-height;\n}\n.collapseY-enter-from,\n.collapseY-leave-to {\n max-height: 0;\n}\n*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(147 197 253 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(147 197 253 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*/\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: currentColor; /* 2 */\n}\n::before,\n::after {\n --tw-content: '';\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n}\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsub {\n bottom: -0.25em;\n}\nsup {\n top: -0.5em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n outline: auto;\n}\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n box-shadow: none;\n}\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n vertical-align: baseline;\n}\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n display: list-item;\n}\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\nfieldset {\n margin: 0;\n padding: 0;\n}\nlegend {\n padding: 0;\n}\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n:root {\n --breakpoint: \"sm\";\n --container-width: unset;\n --inner-gutter: 8px;\n --outer-gutter: 16px;\n --grid-columns: 12;\n --env: \"dev\";\n --grid-column-bg: rgba(127, 255, 255, 0.25);\n}\n@media (min-width: 750px) {\n :root {\n --breakpoint: \"md\";\n --container-width: unset;\n --inner-gutter: 12px;\n --outer-gutter: 20px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 900px) {\n :root {\n --breakpoint: \"lg\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 1024px) {\n :root {\n --breakpoint: \"xl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 1280px) {\n :root {\n --breakpoint: \"xxl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 2200px) {\n :root {\n --breakpoint: \"xxxl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n.container {\n width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));\n margin-right: auto;\n margin-left: auto;\n}\n.container > * {\n --container-outer-gutter: 0;\n --breakout-container-outer-gutter: 0;\n}\n[class*='scrollbar-track-'], [class*='scrollbar-thumb-'] {\n --scrollbar-bg: #fafafa;\n --scrollbar-fg: #c1c1c1;\n --scrollbar-border: #e8e8e8;\n scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar, [class*='scrollbar-thumb-']::-webkit-scrollbar {\n width: var(--scrollbar-width, 15px);\n height: var(--scrollbar-width, 15px);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track, [class*='scrollbar-thumb-']::-webkit-scrollbar-track {\n background: var(--scrollbar-bg);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track:horizontal, [class*='scrollbar-thumb-']::-webkit-scrollbar-track:horizontal {\n border-top: 1px solid var(--scrollbar-border);\n border-bottom: 1px solid var(--scrollbar-border);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track:vertical, [class*='scrollbar-thumb-']::-webkit-scrollbar-track:vertical {\n border-inline-start: 1px solid var(--scrollbar-border);\n border-inline-end: 1px solid var(--scrollbar-border);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-thumb, [class*='scrollbar-thumb-']::-webkit-scrollbar-thumb {\n background: var(--scrollbar-fg);\n border-radius: 20px;\n border: var(--scrollbar-padding, 4px) solid transparent;\n background-clip: content-box;\n}\n:root {\n --spacing-space-01: 5rem;\n --spacing-space-02: 3.75rem;\n --spacing-space-03: 6.25rem;\n --spacing-space-04: 1.75rem;\n}\n@media (min-width: 900px) {\n :root {\n --spacing-space-01: 7.5rem;\n --spacing-space-02: 5rem;\n --spacing-space-03: 7.5rem;\n }\n}\n:root {\n --sans: Inter, Helvetica, Arial, sans-serif;\n --f-heading-01-fontFamily: var(--sans);\n --f-heading-01-fontWeight: 800;\n --f-heading-01-fontSize: 42px;\n --f-heading-01-lineHeight: 100%;\n --f-heading-01-letterSpacing: -0.01em;\n --f-heading-02-fontFamily: var(--sans);\n --f-heading-02-fontWeight: 800;\n --f-heading-02-fontSize: 36px;\n --f-heading-02-lineHeight: 100%;\n --f-heading-02-letterSpacing: -0.01em;\n --f-heading-03-fontFamily: var(--sans);\n --f-heading-03-fontWeight: 800;\n --f-heading-03-fontSize: 36px;\n --f-heading-03-lineHeight: 100%;\n --f-heading-03-letterSpacing: -0.01em;\n --f-heading-04-fontFamily: var(--sans);\n --f-heading-04-fontWeight: 800;\n --f-heading-04-fontSize: 28px;\n --f-heading-04-lineHeight: 100%;\n --f-heading-04-letterSpacing: -0.01em;\n --f-heading-05-fontFamily: var(--sans);\n --f-heading-05-fontWeight: 800;\n --f-heading-05-fontSize: 28px;\n --f-heading-05-lineHeight: 110%;\n --f-heading-05-letterSpacing: -0.01em;\n --f-heading-06-fontFamily: var(--sans);\n --f-heading-06-fontWeight: 800;\n --f-heading-06-fontSize: 22px;\n --f-heading-06-lineHeight: 120%;\n --f-body-01-fontFamily: var(--sans);\n --f-body-01-fontWeight: 600;\n --f-body-01-fontSize: 20px;\n --f-body-01-lineHeight: 140%;\n --f-body-01-letterSpacing: -0.01em;\n --f-body-02-fontFamily: var(--sans);\n --f-body-02-fontWeight: 600;\n --f-body-02-fontSize: 17px;\n --f-body-02-lineHeight: 150%;\n --f-ui-01-fontFamily: var(--sans);\n --f-ui-01-fontWeight: 800;\n --f-ui-01-fontSize: 18px;\n --f-ui-01-lineHeight: 110%;\n --f-ui-01-letterSpacing: -0.01em;\n --f-ui-02-fontFamily: var(--sans);\n --f-ui-02-fontWeight: 800;\n --f-ui-02-fontSize: 16px;\n --f-ui-02-lineHeight: 110%;\n --f-ui-02-letterSpacing: -0.01em;\n --f-ui-02-light-fontFamily: var(--sans);\n --f-ui-02-light-fontWeight: 600;\n --f-ui-02-light-fontSize: 16px;\n --f-ui-02-light-lineHeight: 110%;\n --f-ui-02-light-letterSpacing: -0.01em;\n --f-ui-03-fontFamily: var(--sans);\n --f-ui-03-fontWeight: 800;\n --f-ui-03-fontSize: 14px;\n --f-ui-03-lineHeight: 110%;\n --f-ui-03-letterSpacing: -0.01em;\n --f-ui-03-light-fontFamily: var(--sans);\n --f-ui-03-light-fontWeight: 600;\n --f-ui-03-light-fontSize: 14px;\n --f-ui-03-light-lineHeight: 130%;\n --f-ui-03-light-letterSpacing: -0.01em;\n --f-ui-04-fontFamily: var(--sans);\n --f-ui-04-fontWeight: 800;\n --f-ui-04-fontSize: 12px;\n --f-ui-04-lineHeight: 100%;\n --f-ui-04-letterSpacing: -0.01em;\n --f-ui-05-fontFamily: var(--sans);\n --f-ui-05-fontWeight: 800;\n --f-ui-05-fontSize: 10px;\n --f-ui-05-lineHeight: 110%;\n --f-ui-05-letterSpacing: -0.01em;\n --f-caption-fontFamily: var(--sans);\n --f-caption-fontWeight: 800;\n --f-caption-fontSize: 12px;\n --f-caption-lineHeight: 120%;\n --f-display-01-fontFamily: var(--sans);\n --f-display-01-fontWeight: 800;\n --f-display-01-fontSize: 120px;\n --f-display-01-lineHeight: 100%;\n --f-display-01-letterSpacing: -0.01em;\n}\n.f-heading-01 {\n font-family: var(--f-heading-01-fontFamily);\n font-weight: var(--f-heading-01-fontWeight);\n font-size: var(--f-heading-01-fontSize);\n line-height: var(--f-heading-01-lineHeight);\n letter-spacing: var(--f-heading-01-letterSpacing);\n}\n.f-heading-02 {\n font-family: var(--f-heading-02-fontFamily);\n font-weight: var(--f-heading-02-fontWeight);\n font-size: var(--f-heading-02-fontSize);\n line-height: var(--f-heading-02-lineHeight);\n letter-spacing: var(--f-heading-02-letterSpacing);\n}\n.f-heading-03 {\n font-family: var(--f-heading-03-fontFamily);\n font-weight: var(--f-heading-03-fontWeight);\n font-size: var(--f-heading-03-fontSize);\n line-height: var(--f-heading-03-lineHeight);\n letter-spacing: var(--f-heading-03-letterSpacing);\n}\n.f-heading-04 {\n font-family: var(--f-heading-04-fontFamily);\n font-weight: var(--f-heading-04-fontWeight);\n font-size: var(--f-heading-04-fontSize);\n line-height: var(--f-heading-04-lineHeight);\n letter-spacing: var(--f-heading-04-letterSpacing);\n}\n.f-heading-05 {\n font-family: var(--f-heading-05-fontFamily);\n font-weight: var(--f-heading-05-fontWeight);\n font-size: var(--f-heading-05-fontSize);\n line-height: var(--f-heading-05-lineHeight);\n letter-spacing: var(--f-heading-05-letterSpacing);\n}\n.f-heading-06 {\n font-family: var(--f-heading-06-fontFamily);\n font-weight: var(--f-heading-06-fontWeight);\n font-size: var(--f-heading-06-fontSize);\n line-height: var(--f-heading-06-lineHeight);\n letter-spacing: var(--f-heading-06-letterSpacing);\n}\n.f-body-01 {\n font-family: var(--f-body-01-fontFamily);\n font-weight: var(--f-body-01-fontWeight);\n font-size: var(--f-body-01-fontSize);\n line-height: var(--f-body-01-lineHeight);\n letter-spacing: var(--f-body-01-letterSpacing);\n}\n.f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n}\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n.f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n}\n.f-ui-02-light {\n font-family: var(--f-ui-02-light-fontFamily);\n font-weight: var(--f-ui-02-light-fontWeight);\n font-size: var(--f-ui-02-light-fontSize);\n line-height: var(--f-ui-02-light-lineHeight);\n letter-spacing: var(--f-ui-02-light-letterSpacing);\n}\n.f-ui-03 {\n font-family: var(--f-ui-03-fontFamily);\n font-weight: var(--f-ui-03-fontWeight);\n font-size: var(--f-ui-03-fontSize);\n line-height: var(--f-ui-03-lineHeight);\n letter-spacing: var(--f-ui-03-letterSpacing);\n}\n.f-ui-03-light {\n font-family: var(--f-ui-03-light-fontFamily);\n font-weight: var(--f-ui-03-light-fontWeight);\n font-size: var(--f-ui-03-light-fontSize);\n line-height: var(--f-ui-03-light-lineHeight);\n letter-spacing: var(--f-ui-03-light-letterSpacing);\n}\n.f-ui-04 {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n.f-ui-05 {\n font-family: var(--f-ui-05-fontFamily);\n font-weight: var(--f-ui-05-fontWeight);\n font-size: var(--f-ui-05-fontSize);\n line-height: var(--f-ui-05-lineHeight);\n letter-spacing: var(--f-ui-05-letterSpacing);\n}\n.f-caption {\n font-family: var(--f-caption-fontFamily);\n font-weight: var(--f-caption-fontWeight);\n font-size: var(--f-caption-fontSize);\n line-height: var(--f-caption-lineHeight);\n letter-spacing: var(--f-caption-letterSpacing);\n}\n.f-display-01 {\n font-family: var(--f-display-01-fontFamily);\n font-weight: var(--f-display-01-fontWeight);\n font-size: var(--f-display-01-fontSize);\n line-height: var(--f-display-01-lineHeight);\n letter-spacing: var(--f-display-01-letterSpacing);\n}\n@media (min-width: 750px) {\n :root {\n --f-heading-01-fontSize: 48px;\n }\n}\n@media (min-width: 900px) {\n :root {\n --f-heading-01-fontSize: 72px;\n --f-heading-02-fontSize: 48px;\n --f-display-01-fontSize: 150px;\n }\n}\n@media (min-width: 1024px) {\n :root {\n --f-heading-01-fontSize: 83px;\n --f-heading-02-fontSize: 60px;\n --f-heading-03-fontSize: 42px;\n --f-heading-04-fontSize: 36px;\n }\n}\n.f-heading-01 b, .f-heading-01 strong {\n font-weight: var(--f-heading-01---bold-weight, bold);\n}\n.f-heading-02 b, .f-heading-02 strong {\n font-weight: var(--f-heading-02---bold-weight, bold);\n}\n.f-heading-03 b, .f-heading-03 strong {\n font-weight: var(--f-heading-03---bold-weight, bold);\n}\n.f-heading-04 b, .f-heading-04 strong {\n font-weight: var(--f-heading-04---bold-weight, bold);\n}\n.f-heading-05 b, .f-heading-05 strong {\n font-weight: var(--f-heading-05---bold-weight, bold);\n}\n.f-heading-06 b, .f-heading-06 strong {\n font-weight: var(--f-heading-06---bold-weight, bold);\n}\n.f-body-01 b, .f-body-01 strong {\n font-weight: var(--f-body-01---bold-weight, bold);\n}\n.f-body-02 b, .f-body-02 strong {\n font-weight: var(--f-body-02---bold-weight, bold);\n}\n.f-ui-01 b, .f-ui-01 strong {\n font-weight: var(--f-ui-01---bold-weight, bold);\n}\n.f-ui-02 b, .f-ui-02 strong {\n font-weight: var(--f-ui-02---bold-weight, bold);\n}\n.f-ui-02-light b, .f-ui-02-light strong {\n font-weight: var(--f-ui-02-light---bold-weight, bold);\n}\n.f-ui-03 b, .f-ui-03 strong {\n font-weight: var(--f-ui-03---bold-weight, bold);\n}\n.f-ui-03-light b, .f-ui-03-light strong {\n font-weight: var(--f-ui-03-light---bold-weight, bold);\n}\n.f-ui-04 b, .f-ui-04 strong {\n font-weight: var(--f-ui-04---bold-weight, bold);\n}\n.f-ui-05 b, .f-ui-05 strong {\n font-weight: var(--f-ui-05---bold-weight, bold);\n}\n.f-caption b, .f-caption strong {\n font-weight: var(--f-caption---bold-weight, bold);\n}\n.f-display-01 b, .f-display-01 strong {\n font-weight: var(--f-display-01---bold-weight, bold);\n}\n:root {\n --grey-100: #f8f8f8;\n --grey-200: #f2f2f2;\n --grey-300: #e6e6e6;\n --grey-400: #d8d8d8;\n --grey-500: #8c8c8c;\n --grey-600: #6e6e6e;\n --grey-700: #666666;\n --grey-800: #4d4d4d;\n --grey-900: #242424;\n --green-100: #eaffee;\n --green-200: #d3ffdc;\n --green-300: #9dffb4;\n --green-400: #63fb92;\n --green-500: #00e766;\n --green-600: #00c959;\n --green-700: #009d45;\n --green-800: #007734;\n --green-900: #004f23;\n --yellow-100: #fefee5;\n --yellow-200: #ffffcb;\n --yellow-300: #fdfdaa;\n --yellow-400: #ffff8b;\n --yellow-500: #ffff51;\n --yellow-600: #f3f30a;\n --yellow-700: #d7d72b;\n --yellow-800: #9a9a1e;\n --yellow-900: #636313;\n --orange-100: #fff4ee;\n --orange-200: #ffeade;\n --orange-300: #ffdcc5;\n --orange-400: #ffcca9;\n --orange-500: #ffb87e;\n --orange-600: #ffa543;\n --orange-700: #cb7f28;\n --orange-800: #995f1e;\n --orange-900: #653f14;\n --red-100: #feefef;\n --red-200: #ffe0e1;\n --red-300: #ffc7c9;\n --red-400: #ff9ea2;\n --red-500: #ff7a7f;\n --red-600: #ff4d68;\n --red-700: #d01111;\n --red-800: #a3001a;\n --red-900: #6f0011;\n --purple-100: #f9f3ff;\n --purple-200: #f4e8ff;\n --purple-300: #e9ceff;\n --purple-400: #ddb1ff;\n --purple-500: #d18fff;\n --purple-600: #c461ff;\n --purple-700: #af56e4;\n --purple-800: #8337b1;\n --purple-900: #3d1e4f;\n --blue-100: #eff0ff;\n --blue-200: #dee0ff;\n --blue-300: #caceff;\n --blue-400: #b2b8ff;\n --blue-500: #7a89f5;\n --blue-600: #2b69fc;\n --blue-700: #0034cb;\n --blue-800: #002799;\n --blue-900: #001a65;\n --cyan-100: #E0EEFF;\n --cyan-200: #D3E6FF;\n --cyan-300: #B5D8FF;\n --cyan-400: #92C8FF;\n --cyan-500: #6CBFFE;\n --cyan-600: #3FA9F5;\n --cyan-700: #267FBE;\n --cyan-800: #1F689B;\n --cyan-900: #15496D;\n --black: #000000;\n --white: #ffffff;\n --transparent: transparent;\n --current: currentColor;\n}\n.grid-layout {\n display: grid;\n grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);\n grid-gap: var(--inner-gutter);\n}\n.grid-col-span-2 {\n --container-grid-columns: 2;\n grid-column: span 2 / span 2;\n}\n.grid-col-span-3 {\n --container-grid-columns: 3;\n grid-column: span 3 / span 3;\n}\n.grid-col-span-4 {\n --container-grid-columns: 4;\n grid-column: span 4 / span 4;\n}\n.grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n}\n.grid-col-span-8 {\n --container-grid-columns: 8;\n grid-column: span 8 / span 8;\n}\n.grid-col-span-10 {\n --container-grid-columns: 10;\n grid-column: span 10 / span 10;\n}\n.grid-col-span-12 {\n --container-grid-columns: 12;\n grid-column: span 12 / span 12;\n}\n.grid-col-start-1 {\n grid-column-start: 1;\n}\n.grid-col-start-2 {\n grid-column-start: 2;\n}\n.grid-col-start-3 {\n grid-column-start: 3;\n}\n.grid-col-start-4 {\n grid-column-start: 4;\n}\n.grid-col-start-5 {\n grid-column-start: 5;\n}\n.grid-col-start-6 {\n grid-column-start: 6;\n}\n.grid-col-start-7 {\n grid-column-start: 7;\n}\n.grid-col-start-8 {\n grid-column-start: 8;\n}\n.grid-col-start-9 {\n grid-column-start: 9;\n}\n.grid-col-start-10 {\n grid-column-start: 10;\n}\n.grid-col-start-11 {\n grid-column-start: 11;\n}\n.grid-col-start-12 {\n grid-column-start: 12;\n}\n[class*=\"grid-line-\"] > * {\n position: relative;\n}\n[class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n}\n.grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n}\n@media (min-width: 750px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .md\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .md\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .md\\:grid-line-x-0 > *::before {\n content: none;\n }\n .md\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-y-0 > *::after {\n content: none;\n }\n .md\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .md\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .md\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .md\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .md\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .md\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .md\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .md\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .md\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .md\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .md\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .md\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .md\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .md\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .md\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .md\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .md\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .md\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .md\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .md\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .md\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .md\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .md\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .md\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .md\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .md\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .md\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .md\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .md\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .md\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .md\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .md\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .md\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .md\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .md\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .md\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .md\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .md\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .md\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .md\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .md\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .md\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .md\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .md\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .md\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .md\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .md\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .md\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .md\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .md\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .md\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .md\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .md\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .md\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .md\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .md\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .md\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .md\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .md\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .md\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .md\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .md\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .md\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .md\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .md\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .md\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .md\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .md\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .md\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .md\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .md\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .md\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .md\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .md\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .md\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .md\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .md\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .md\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .md\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .md\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .md\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .md\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .md\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .md\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .md\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .md\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .md\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .md\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .md\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .md\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .md\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .md\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .md\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .md\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .md\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .md\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .md\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .md\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .md\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .md\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .md\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .md\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .md\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .md\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 900px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .lg\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .lg\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .lg\\:grid-line-x-0 > *::before {\n content: none;\n }\n .lg\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-y-0 > *::after {\n content: none;\n }\n .lg\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .lg\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .lg\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .lg\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .lg\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .lg\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .lg\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .lg\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .lg\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .lg\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .lg\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .lg\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .lg\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .lg\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .lg\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .lg\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .lg\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .lg\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .lg\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .lg\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .lg\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .lg\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .lg\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .lg\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .lg\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .lg\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .lg\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .lg\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .lg\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .lg\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .lg\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .lg\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .lg\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .lg\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .lg\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .lg\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .lg\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .lg\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .lg\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .lg\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .lg\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .lg\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .lg\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .lg\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .lg\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .lg\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .lg\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .lg\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .lg\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .lg\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .lg\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .lg\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .lg\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .lg\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .lg\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .lg\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .lg\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .lg\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .lg\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .lg\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .lg\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .lg\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .lg\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .lg\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .lg\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .lg\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .lg\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .lg\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .lg\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .lg\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .lg\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .lg\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .lg\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .lg\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .lg\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .lg\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .lg\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .lg\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .lg\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .lg\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .lg\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .lg\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .lg\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .lg\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .lg\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .lg\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .lg\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .lg\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .lg\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .lg\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .lg\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .lg\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .lg\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .lg\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .lg\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .lg\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .lg\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .lg\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .lg\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .lg\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .lg\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .lg\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .lg\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .lg\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 1024px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 1280px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xxl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xxl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xxl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xxl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xxl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xxl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xxl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xxl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xxl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xxl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xxl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xxl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xxl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xxl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xxl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xxl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xxl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xxl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xxl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xxl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xxl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xxl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xxl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xxl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xxl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xxl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xxl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xxl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xxl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xxl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xxl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xxl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xxl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xxl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xxl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xxl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xxl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xxl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xxl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xxl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xxl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xxl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xxl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xxl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xxl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xxl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xxl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xxl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xxl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xxl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xxl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xxl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xxl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xxl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xxl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xxl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xxl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xxl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xxl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xxl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xxl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xxl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xxl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xxl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xxl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xxl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xxl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xxl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xxl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xxl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xxl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xxl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xxl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xxl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xxl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xxl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xxl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xxl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xxl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xxl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xxl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xxl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xxl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 2200px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xxxl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxxl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxxl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xxxl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xxxl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xxxl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xxxl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xxxl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xxxl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xxxl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xxxl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xxxl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xxxl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xxxl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xxxl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xxxl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xxxl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xxxl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xxxl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xxxl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xxxl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xxxl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xxxl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xxxl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xxxl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xxxl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xxxl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xxxl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xxxl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xxxl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xxxl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xxxl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xxxl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xxxl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xxxl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xxxl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xxxl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xxxl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xxxl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xxxl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xxxl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xxxl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xxxl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xxxl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xxxl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xxxl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xxxl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xxxl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xxxl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xxxl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xxxl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xxxl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xxxl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xxxl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xxxl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xxxl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xxxl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xxxl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xxxl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xxxl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xxxl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xxxl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xxxl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xxxl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xxxl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xxxl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xxxl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xxxl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xxxl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xxxl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xxxl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xxxl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xxxl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xxxl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xxxl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xxxl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xxxl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xxxl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xxxl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xxxl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xxxl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xxxl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xxxl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xxxl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xxxl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxxl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxxl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxxl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxxl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxxl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxxl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxxl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxxl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxxl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxxl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxxl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n.cols-container > .ml-0 {\n margin-left: 0;\n}\n.w-12-cols {\n width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n}\n.cols-container > .w-12-cols {\n width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n}\n.w-12-cols > * {\n --container-grid-columns: 12;\n}\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1 );\n }\n\n &::after {\n content: '';\n }\n}\n.border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n &::after {\n content: '';\n }\n }\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n &::after {\n content: '';\n }\n }\n.input-label-options {\n font-family: var(--f-ui-03-fontFamily);\n font-size: var(--f-ui-03-fontSize);\n line-height: var(--f-ui-03-lineHeight);\n letter-spacing: var(--f-ui-03-letterSpacing);\n}\n.input-label {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n.input-label b,.input-label strong {\n font-weight: var(--f-ui-04---bold-weight, bold);\n}\n.input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: flex;\n min-height: 2.5rem;\n width: 100%;\n align-items: center;\n padding-top: 10px;\n padding-bottom: 10px;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n border-radius: 8px;\n border-width: 2px;\n border-color: rgba(0, 0, 0, .1 );\n}\n.input:hover {\n border-color: var(--black);\n}\n.input:active {\n border-color: var(--black);\n}\n.input {\n font-family: var(--f-ui-02-light-fontFamily);\n font-weight: var(--f-ui-02-light-fontWeight);\n font-size: var(--f-ui-02-light-fontSize);\n line-height: var(--f-ui-02-light-lineHeight);\n letter-spacing: var(--f-ui-02-light-letterSpacing);\n}\n.input b,.input strong {\n font-weight: var(--f-ui-02-light---bold-weight, bold);\n}\n.input::-moz-placeholder {\n color: var(--grey-500);\n}\n.input::placeholder {\n color: var(--grey-500);\n}\n.input {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n.input:focus-visible {\n outline-style: solid;\n}\n.input:disabled {\n cursor: not-allowed;\n background-color: var(--grey-300);\n color: var(--grey-500);\n}\n.input:disabled:hover {\n border-color: rgba(0, 0, 0, .1 );\n}\n.input:disabled:active {\n border-color: rgba(0, 0, 0, .1 );\n}\n.input-with-icon {\n padding-right: 34px;\n}\n.input-checkbox {\n position: relative;\n height: 1rem;\n min-height: auto;\n width: 1rem;\n padding: 0rem;\n border-radius: 4px;\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-checkbox::after {\n --tw-content: '';\n content: var(--tw-content);\n position: absolute;\n top: 0rem;\n left: 50%;\n --tw-translate-x: -50%;\n height: 10px;\n width: 6px;\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n border-bottom-width: 2px;\n border-right-width: 2px;\n border-color: var(--transparent);\n}\n.input-checkbox:checked {\n border-color: var(--black);\n background-color: var(--black);\n}\n.input-checkbox:checked::after {\n border-color: var(--white);\n}\n.input-checkbox:checked:disabled {\n border-color: rgba(0, 0, 0, .15 );\n background-color: var(--grey-300);\n}\n.input-checkbox:checked:disabled::after {\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-radio {\n position: relative;\n height: 1rem;\n min-height: auto;\n width: 1rem;\n padding: 0rem;\n border-radius: 9999px;\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-radio::after {\n --tw-content: '';\n content: var(--tw-content);\n position: absolute;\n top: 50%;\n left: 50%;\n --tw-translate-x: -50%;\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n height: 6px;\n width: 6px;\n border-radius: 9999px;\n background-color: var(--transparent);\n}\n.input-radio:checked {\n border-color: var(--black);\n background-color: var(--black);\n}\n.input-radio:checked::after {\n background-color: var(--white);\n}\n.input-radio:checked:disabled::after {\n background-color: var(--white);\n}\n.input-error {\n border-color: var(--red-700);\n}\n.input-counter {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n color: var(--grey-500);\n\n &.input-counter-error {\n color: var(--red-700);\n }\n}\ninput[type=\"range\"]::-webkit-slider-thumb {\n height: 1.5rem;\n width: 1.5rem;\n border-radius: 9999px;\n outline: 2px solid var(--green-400); /* This adds an outline */\n background-color: var(--green-500);\n -webkit-appearance: none;\n appearance: none; /* Ensure the thumb can be styled */\n}\n.loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n}\n.scroller-x {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.scroller-x::-webkit-scrollbar {\n display: none;\n}\n.scroller-x {\n overflow: auto;\n overscroll-behavior-x: contain;\n}\n/** region TRANSITIONS */\n.effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-background {\n transition-property: background;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-height {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-property: height;\n}\n.effect-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n/** endregion */\n/* region FOCUS */\n.effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n.effect-focus:focus-visible {\n outline-style: solid;\n}\n.effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n.effect-focus-within:focus-within {\n outline-style: solid;\n}\n/* endregion */\n/* region BG */\n.effect-bg-pattern {\n position: relative;\n z-index: 1;\n\n &::before {\n position: absolute;\n content: '';\n z-index: -1;\n inset: 0;\n background-color: rgba(208, 208, 208, 0.75);\n opacity: 0.75;\n background-image: repeating-linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5), repeating-linear-gradient(45deg, #F5F5F5 25%, #D0D0D0 25%, #D0D0D0 75%, #F5F5F5 75%, #F5F5F5);\n background-position: 0 0, 8px 8px;\n background-size: 16px 16px;\n }\n }\n.effect-bg-behind {\n position: relative;\n}\n.effect-bg-behind::before {\n position: absolute;\n inset: 0rem;\n z-index: -1;\n --tw-content: '';\n content: var(--tw-content);\n}\n.effect-bg-behind {\n\n &:before {\n background-size: calc(100% + 6px) calc(100% + 6px) !important;\n background-position: -4px -4px !important;\n background-repeat: no-repeat !important;\n }\n }\n.effect-bg-behind-link {\n position: relative;\n}\n.effect-bg-behind-link::before {\n position: absolute;\n top: 0rem;\n bottom: 0rem;\n left: -0.5rem;\n right: 0rem;\n z-index: 0;\n border-radius: 8px;\n background-color: var(--grey-400);\n --tw-content: '';\n content: var(--tw-content);\n}\n.effect-bg-behind-link[aria-disabled=\"true\"]::before {\n background-color: var(--transparent);\n}\n/* endregion */\n/*region shadow*/\n/*endregion*/\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n.pointer-events-none {\n pointer-events: none;\n}\n.visible {\n visibility: visible;\n}\n.collapse {\n visibility: collapse;\n}\n.static {\n position: static;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.inset-0 {\n inset: 0rem;\n}\n.inset-x-16 {\n left: 1rem;\n right: 1rem;\n}\n.-top-1 {\n top: -0.0625rem;\n}\n.bottom-0 {\n bottom: 0rem;\n}\n.bottom-20 {\n bottom: 1.25rem;\n}\n.bottom-4 {\n bottom: 0.25rem;\n}\n.bottom-8 {\n bottom: 0.5rem;\n}\n.left-0 {\n left: 0rem;\n}\n.left-1\\/2 {\n left: 50%;\n}\n.left-20 {\n left: 1.25rem;\n}\n.left-4 {\n left: 0.25rem;\n}\n.left-\\[4px\\] {\n left: 4px;\n}\n.right-0 {\n right: 0rem;\n}\n.right-20 {\n right: 1.25rem;\n}\n.right-4 {\n right: 0.25rem;\n}\n.right-8 {\n right: 0.5rem;\n}\n.right-\\[4px\\] {\n right: 4px;\n}\n.right-\\[6px\\] {\n right: 6px;\n}\n.top-0 {\n top: 0rem;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.top-16 {\n top: 1rem;\n}\n.top-20 {\n top: 1.25rem;\n}\n.top-full {\n top: 100%;\n}\n.z-0 {\n z-index: 0;\n}\n.z-1 {\n z-index: 1;\n}\n.z-10 {\n z-index: 10;\n}\n.z-50 {\n z-index: 50;\n}\n.z-\\[1\\] {\n z-index: 1;\n}\n.z-\\[999999\\] {\n z-index: 999999;\n}\n.z-focus {\n z-index: 99;\n}\n.z-on-top {\n z-index: 99999;\n}\n.order-first {\n order: -9999;\n}\n.order-last {\n order: 9999;\n}\n.m-0 {\n margin: 0rem;\n}\n.m-32 {\n margin: 2rem;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.my-16 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.my-20 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n.my-4 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n.my-8 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.-ml-16 {\n margin-left: -1rem;\n}\n.-mr-16 {\n margin-right: -1rem;\n}\n.mb-10 {\n margin-bottom: 0.625rem;\n}\n.mb-12 {\n margin-bottom: 0.75rem;\n}\n.mb-28 {\n margin-bottom: 1.75rem;\n}\n.mb-4 {\n margin-bottom: 0.25rem;\n}\n.ml-0 {\n margin-left: 0rem;\n}\n.ml-4 {\n margin-left: 0.25rem;\n}\n.ml-64 {\n margin-left: 4rem;\n}\n.ml-8 {\n margin-left: 0.5rem;\n}\n.ml-auto {\n margin-left: auto;\n}\n.mr-4 {\n margin-right: 0.25rem;\n}\n.mr-8 {\n margin-right: 0.5rem;\n}\n.mr-auto {\n margin-right: auto;\n}\n.mt-12 {\n margin-top: 0.75rem;\n}\n.mt-16 {\n margin-top: 1rem;\n}\n.mt-2 {\n margin-top: 0.125rem;\n}\n.mt-20 {\n margin-top: 1.25rem;\n}\n.mt-28 {\n margin-top: 1.75rem;\n}\n.mt-32 {\n margin-top: 2rem;\n}\n.mt-4 {\n margin-top: 0.25rem;\n}\n.mt-6 {\n margin-top: 0.375rem;\n}\n.mt-8 {\n margin-top: 0.5rem;\n}\n.mt-auto {\n margin-top: auto;\n}\n.line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n}\n.line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n}\n.line-clamp-4 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 4;\n}\n.block {\n display: block;\n}\n.inline-block {\n display: inline-block;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.hidden {\n display: none;\n}\n.aspect-16x9 {\n aspect-ratio: 16/9;\n}\n.aspect-1x1 {\n aspect-ratio: 1/1;\n}\n.aspect-21x9 {\n aspect-ratio: 21/9;\n}\n.aspect-3x2 {\n aspect-ratio: 3/2;\n}\n.aspect-4x3 {\n aspect-ratio: 4/3;\n}\n.aspect-4x5 {\n aspect-ratio: 4/5;\n}\n.h-0 {\n height: 0rem;\n}\n.h-12 {\n height: 0.75rem;\n}\n.h-16 {\n height: 1rem;\n}\n.h-2 {\n height: 0.125rem;\n}\n.h-20 {\n height: 1.25rem;\n}\n.h-24 {\n height: 1.5rem;\n}\n.h-28 {\n height: 1.75rem;\n}\n.h-32 {\n height: 2rem;\n}\n.h-36 {\n height: 2.25rem;\n}\n.h-4 {\n height: 0.25rem;\n}\n.h-40 {\n height: 2.5rem;\n}\n.h-44 {\n height: 2.75rem;\n}\n.h-48 {\n height: 3rem;\n}\n.h-64 {\n height: 4rem;\n}\n.h-8 {\n height: 0.5rem;\n}\n.h-96 {\n height: 6rem;\n}\n.h-\\[85px\\] {\n height: 85px;\n}\n.h-auto {\n height: auto;\n}\n.h-full {\n height: 100%;\n}\n.\\!min-h-20 {\n min-height: 1.25rem !important;\n}\n.min-h-156 {\n min-height: 156px;\n}\n.min-h-36 {\n min-height: 2.25rem;\n}\n.min-h-44 {\n min-height: 2.75rem;\n}\n.min-h-56 {\n min-height: 3.5rem;\n}\n.min-h-80 {\n min-height: 5rem;\n}\n.min-h-\\[150px\\] {\n min-height: 150px;\n}\n.min-h-\\[225px\\] {\n min-height: 225px;\n}\n.min-h-\\[90px\\] {\n min-height: 90px;\n}\n.min-h-full {\n min-height: 100%;\n}\n.min-h-screen {\n min-height: 100vh;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-20 {\n width: 1.25rem;\n}\n.w-28 {\n width: 1.75rem;\n}\n.w-32 {\n width: 2rem;\n}\n.w-4 {\n width: 0.25rem;\n}\n.w-44 {\n width: 2.75rem;\n}\n.w-\\[200px\\] {\n width: 200px;\n}\n.w-\\[300px\\] {\n width: 300px;\n}\n.w-\\[54px\\] {\n width: 54px;\n}\n.w-auto {\n width: auto;\n}\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.w-full {\n width: 100%;\n}\n.min-w-\\[200px\\] {\n min-width: 200px;\n}\n.min-w-\\[210px\\] {\n min-width: 210px;\n}\n.min-w-\\[250px\\] {\n min-width: 250px;\n}\n.min-w-\\[280px\\] {\n min-width: 280px;\n}\n.max-w-120 {\n max-width: 120px;\n}\n.max-w-full {\n max-width: 100%;\n}\n.max-w-sidebar {\n max-width: 1224px;\n}\n.max-w-xxxl {\n max-width: 2200px;\n}\n.flex-none {\n flex: none;\n}\n.grow {\n flex-grow: 1;\n}\n.-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.resize {\n resize: both;\n}\n.appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.grid-cols-10 {\n grid-template-columns: repeat(10, minmax(0, 1fr));\n}\n.grid-cols-11 {\n grid-template-columns: repeat(11, minmax(0, 1fr));\n}\n.grid-cols-12 {\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n}\n.grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr));\n}\n.grid-cols-7 {\n grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n.grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n}\n.grid-cols-9 {\n grid-template-columns: repeat(9, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-1 {\n gap: 0.0625rem;\n}\n.gap-12 {\n gap: 0.75rem;\n}\n.gap-20 {\n gap: 1.25rem;\n}\n.gap-4 {\n gap: 0.25rem;\n}\n.gap-x-12 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n.gap-x-16 {\n -moz-column-gap: 1rem;\n column-gap: 1rem;\n}\n.gap-x-2 {\n -moz-column-gap: 0.125rem;\n column-gap: 0.125rem;\n}\n.gap-x-4 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem;\n}\n.gap-x-8 {\n -moz-column-gap: 0.5rem;\n column-gap: 0.5rem;\n}\n.gap-y-12 {\n row-gap: 0.75rem;\n}\n.gap-y-16 {\n row-gap: 1rem;\n}\n.gap-y-4 {\n row-gap: 0.25rem;\n}\n.gap-y-8 {\n row-gap: 0.5rem;\n}\n.space-x-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.0625rem * var(--tw-space-x-reverse));\n margin-left: calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-12 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.space-y-16 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-x-auto {\n overflow-x: auto;\n}\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.text-ellipsis {\n text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.break-words {\n overflow-wrap: break-word;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 16px;\n}\n.rounded-md {\n border-radius: 12px;\n}\n.rounded-pill {\n border-radius: 100px;\n}\n.rounded-sm {\n border-radius: 8px;\n}\n.rounded-xs {\n border-radius: 4px;\n}\n.rounded-xxs {\n border-radius: 2px;\n}\n.rounded-t-lg {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n.rounded-tl-lg {\n border-top-left-radius: 16px;\n}\n.rounded-tr-lg {\n border-top-right-radius: 16px;\n}\n.border {\n border-width: 1px;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-3 {\n border-width: 3px;\n}\n.border-b-2 {\n border-bottom-width: 2px;\n}\n.border-l-0 {\n border-left-width: 0px;\n}\n.border-r-0 {\n border-right-width: 0px;\n}\n.border-t-2 {\n border-top-width: 2px;\n}\n.border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n.border-\\[\\#d2d2d2\\] {\n --tw-border-opacity: 1;\n border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n.border-accent {\n border-color: var(--green-500);\n}\n.border-current {\n border-color: currentColor;\n}\n.border-default {\n border-color: var(--black);\n}\n.border-error {\n border-color: var(--red-700);\n}\n.border-inverse {\n border-color: var(--white);\n}\n.border-inverse-soft {\n border-color: rgba(255, 255, 255, 0.3);\n}\n.border-inverse-softer {\n border-color: rgba(255, 255, 255, 0.15);\n}\n.border-soft {\n border-color: rgba(0, 0, 0, .15 );\n}\n.border-softer {\n border-color: rgba(0, 0, 0, .1 );\n}\n.border-softest {\n border-color: rgba(0, 0, 0, .05 );\n}\n.border-transparent {\n border-color: var(--transparent);\n}\n.border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1 );\n}\n.\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n}\n.\\!bg-darker {\n background-color: var(--grey-400) !important;\n}\n.\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n}\n.bg-accent {\n background-color: var(--green-500);\n}\n.bg-accent-dark {\n background-color: var(--green-600);\n}\n.bg-accent-darker {\n background-color: var(--green-800);\n}\n.bg-current {\n background-color: currentColor;\n}\n.bg-dark {\n background-color: var(--grey-300);\n}\n.bg-darker {\n background-color: var(--grey-400);\n}\n.bg-default {\n background-color: var(--grey-200);\n}\n.bg-error {\n background-color: var(--red-200);\n}\n.bg-inverse {\n background-color: var(--white);\n}\n.bg-inverse-soft {\n background-color: rgba(255, 255, 255, .2);\n}\n.bg-inverse-softer {\n background-color: rgba(255, 255, 255, .15);\n}\n.bg-on-dark {\n background-color: rgba(255, 255, 255, 0.2);\n}\n.bg-on-gradient {\n background-color: rgba(0, 0, 0, 0.1);\n}\n.bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n}\n.bg-strong {\n background-color: var(--grey-700);\n}\n.bg-strong-dark {\n background-color: var(--grey-800);\n}\n.bg-stronger {\n background-color: var(--grey-900);\n}\n.bg-strongest {\n background-color: var(--black);\n}\n.bg-strongest-soft {\n background-color: rgba(0, 0, 0, .05);\n}\n.bg-success {\n background-color: var(--green-200);\n}\n.bg-transparent {\n background-color: var(--transparent);\n}\n.bg-warning {\n background-color: var(--yellow-200);\n}\n.bg-opacity-90 {\n --tw-bg-opacity: 0.9;\n}\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n.object-center {\n -o-object-position: center;\n object-position: center;\n}\n.\\!p-8 {\n padding: 0.5rem !important;\n}\n.p-0 {\n padding: 0rem;\n}\n.p-12 {\n padding: 0.75rem;\n}\n.p-16 {\n padding: 1rem;\n}\n.p-2 {\n padding: 0.125rem;\n}\n.p-20 {\n padding: 1.25rem;\n}\n.p-32 {\n padding: 2rem;\n}\n.p-4 {\n padding: 0.25rem;\n}\n.p-6 {\n padding: 0.375rem;\n}\n.p-8 {\n padding: 0.5rem;\n}\n.\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n}\n.\\!py-0 {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n}\n.\\!py-4 {\n padding-top: 0.25rem !important;\n padding-bottom: 0.25rem !important;\n}\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-2 {\n padding-left: 0.125rem;\n padding-right: 0.125rem;\n}\n.px-20 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.px-4 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-6 {\n padding-left: 0.375rem;\n padding-right: 0.375rem;\n}\n.py-1 {\n padding-top: 0.0625rem;\n padding-bottom: 0.0625rem;\n}\n.py-12 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.py-16 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-20 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n.py-4 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-6 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.pb-16 {\n padding-bottom: 1rem;\n}\n.pb-20 {\n padding-bottom: 1.25rem;\n}\n.pb-28 {\n padding-bottom: 1.75rem;\n}\n.pb-60 {\n padding-bottom: 3.75rem;\n}\n.pb-8 {\n padding-bottom: 0.5rem;\n}\n.pl-12 {\n padding-left: 0.75rem;\n}\n.pl-28 {\n padding-left: 1.75rem;\n}\n.pl-32 {\n padding-left: 2rem;\n}\n.pl-36 {\n padding-left: 2.25rem;\n}\n.pl-4 {\n padding-left: 0.25rem;\n}\n.pl-8 {\n padding-left: 0.5rem;\n}\n.pr-12 {\n padding-right: 0.75rem;\n}\n.pr-28 {\n padding-right: 1.75rem;\n}\n.pr-32 {\n padding-right: 2rem;\n}\n.pr-4 {\n padding-right: 0.25rem;\n}\n.pr-8 {\n padding-right: 0.5rem;\n}\n.pt-12 {\n padding-top: 0.75rem;\n}\n.pt-20 {\n padding-top: 1.25rem;\n}\n.pt-28 {\n padding-top: 1.75rem;\n}\n.pt-32 {\n padding-top: 2rem;\n}\n.pt-40 {\n padding-top: 2.5rem;\n}\n.pt-48 {\n padding-top: 3rem;\n}\n.pt-8 {\n padding-top: 0.5rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.lowercase {\n text-transform: lowercase;\n}\n.\\!text-current {\n color: currentColor !important;\n}\n.text-\\[\\#0034CB\\] {\n --tw-text-opacity: 1;\n color: rgb(0 52 203 / var(--tw-text-opacity));\n}\n.text-accent {\n color: var(--green-500);\n}\n.text-current {\n color: currentColor;\n}\n.text-default {\n color: var(--black);\n}\n.text-error {\n color: var(--red-700);\n}\n.text-extra-light {\n color: var(--grey-300);\n}\n.text-inverse {\n color: var(--white);\n}\n.text-light {\n color: var(--grey-700);\n}\n.text-lighter {\n color: var(--grey-600);\n}\n.text-lightest {\n color: var(--grey-500);\n}\n.text-on-gradient {\n color: rgba(0, 0, 0, 0.55);\n}\n.text-success {\n color: var(--green-800);\n}\n.text-transparent {\n color: var(--transparent);\n}\n.text-warning {\n color: var(--yellow-900);\n}\n.underline {\n text-decoration-line: underline;\n}\n.\\!no-underline {\n text-decoration-line: none !important;\n}\n.decoration-\\[\\#0034CB\\] {\n text-decoration-color: #0034CB;\n}\n.decoration-accent {\n text-decoration-color: var(--green-500);\n}\n.decoration-2 {\n text-decoration-thickness: 2px;\n}\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-small {\n --tw-shadow: 0px 1.5px 2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0px 1.5px 2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.outline {\n outline-style: solid;\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur {\n --tw-backdrop-blur: blur(8px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n[class*=\"keyline-\"] {\n position: relative;\n}\n[class*=\"keyline-\"]::before {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n inset-inline-start: calc(var(--inner-gutter) / -2 - 1px);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border: 1px solid transparent;\n pointer-events: none;\n}\n[class*=\"keyline-0\"]::before {\n border-inline-end-color: transparent;\n border-inline-start-color: transparent;\n}\n.ratio {\n --ratio: 100%;\n display: block;\n position: relative;\n overflow: hidden;\n}\n.ratio::before {\n content: attr(👻);\n display: block;\n width: 100%;\n height: 0;\n padding-bottom: var(--ratio);\n}\n.ratio > [class*=\"ratio-content\"] {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n}\n[class*=underline-] {\n text-decoration-line: underline;\n}\n.underline-offset-4 {\n text-underline-offset: 0.2em;\n}\n.\\@container {\n container-type: inline-size;\n}\n.bg-gradient-01-top {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n }\n.bg-gradient-01-bottom {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n }\n.bg-gradient-02-top {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n }\n.bg-gradient-02-bottom {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n }\n.bg-gradient-03-top {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n }\n.bg-gradient-03-bottom {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n }\n.bg-gradient-04-top {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n }\n.bg-gradient-04-bottom {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n }\n.after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.before\\:effect-opacity::before {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n@media (min-width: 750px) {\n .md\\:grid-col-span-4 {\n --container-grid-columns: 4;\n grid-column: span 4 / span 4;\n }\n .md\\:grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n }\n .md\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .md\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .md\\:w-10-cols > * {\n --container-grid-columns: 10;\n }\n}\n@media (min-width: 900px) {\n .lg\\:grid-col-span-5 {\n --container-grid-columns: 5;\n grid-column: span 5 / span 5;\n }\n .lg\\:grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n }\n .lg\\:grid-col-start-7 {\n grid-column-start: 7;\n }\n .lg\\:w-8-cols {\n width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .lg\\:w-8-cols {\n width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .lg\\:w-8-cols > * {\n --container-grid-columns: 8;\n }\n .lg\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .lg\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .lg\\:w-10-cols > * {\n --container-grid-columns: 10;\n }\n}\n.even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n}\n.invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n}\n.focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n}\n.hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n}\n.hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n}\n.hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n}\n.hover\\:bg-default:hover {\n background-color: var(--grey-200);\n}\n.hover\\:bg-inverse:hover {\n background-color: var(--white);\n}\n.hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n}\n.hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n}\n.hover\\:text-default:hover {\n color: var(--black);\n}\n.hover\\:text-lighter:hover {\n color: var(--grey-600);\n}\n.hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n}\n.hover\\:no-underline:hover {\n text-decoration-line: none;\n}\n.hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus-visible\\:rounded-xs:focus-visible {\n border-radius: 4px;\n}\n.focus-visible\\:text-default:focus-visible {\n color: var(--black);\n}\n.focus-visible\\:outline-none:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n.disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n}\n.disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n}\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n}\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n}\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n}\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n}\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n}\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n}\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n}\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n}\n.after\\:absolute::after {\n position: absolute;\n}\n.after\\:inset-0::after {\n inset: 0rem;\n}\n.after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n}\n.after\\:bottom-0::after {\n bottom: 0rem;\n}\n.after\\:left-16::after {\n left: 1rem;\n}\n.after\\:right-16::after {\n right: 1rem;\n}\n.after\\:z-10::after {\n z-index: 10;\n}\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n.after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n.after\\:border-3::after {\n border-width: 3px;\n}\n.after\\:border-b-2::after {\n border-bottom-width: 2px;\n}\n.after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n}\n.after\\:border-accent::after {\n border-color: var(--green-500);\n}\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05 );\n}\n.after\\:opacity-0::after {\n opacity: 0;\n}\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n.hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n}\n.hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n}\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n}\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n}\n.before\\:absolute::before {\n position: absolute;\n}\n.before\\:inset-x-0::before {\n left: 0rem;\n right: 0rem;\n}\n.before\\:-bottom-2::before {\n bottom: -0.125rem;\n}\n.before\\:bottom-0::before {\n bottom: 0rem;\n}\n.before\\:h-12::before {\n height: 0.75rem;\n}\n.before\\:h-3::before {\n height: 0.1875rem;\n}\n.before\\:rounded-lg::before {\n border-radius: 16px;\n}\n.before\\:border-2::before {\n border-width: 2px;\n}\n.before\\:border-softest::before {\n border-color: rgba(0, 0, 0, .05 );\n}\n.before\\:bg-default::before {\n background-color: var(--grey-200);\n}\n.before\\:bg-inverse-softer::before {\n background-color: rgba(255, 255, 255, .15);\n}\n.before\\:\\!opacity-100::before {\n opacity: 1 !important;\n}\n.before\\:opacity-0::before {\n opacity: 0;\n}\n.before\\:opacity-5::before {\n opacity: 0.05;\n}\n.before\\:content-\\[\\'\\'\\]::before {\n --tw-content: '';\n content: var(--tw-content);\n}\n.before\\:bg-gradient-y::before {\n background: linear-gradient(to bottom, transparent, ease-in-out, black);\n }\n.before\\:bg-gradient-01-top::before {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-01-bottom::before {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-02-top::before {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-02-bottom::before {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-03-top::before {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-03-bottom::before {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-04-top::before {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-04-bottom::before {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n }\n.hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n}\n.focus-visible\\:before\\:\\!opacity-0:focus-visible::before {\n opacity: 0 !important;\n}\n.focus-visible\\:before\\:opacity-0:focus-visible::before {\n opacity: 0;\n}\n@container (min-width: 46.875rem) {\n .\\@md\\:max-w-192 {\n max-width: 192px;\n }\n}\n@media (min-width: 0px) {\n .sm\\:mb-4 {\n margin-bottom: 0.25rem;\n }\n .sm\\:max-w-\\[200px\\] {\n max-width: 200px;\n }\n}\n@media (min-width: 750px) {\n .md\\:left-1\\/2 {\n left: 50%;\n }\n .md\\:flex {\n display: flex;\n }\n .md\\:hidden {\n display: none;\n }\n .md\\:w-\\[300px\\] {\n width: 300px;\n }\n .md\\:-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .md\\:-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .md\\:gap-y-12 {\n row-gap: 0.75rem;\n }\n .md\\:pt-28 {\n padding-top: 1.75rem;\n }\n}\n@media (min-width: 900px) {\n .lg\\:order-last {\n order: 9999;\n }\n .lg\\:order-none {\n order: 0;\n }\n .lg\\:mt-0 {\n margin-top: 0rem;\n }\n .lg\\:block {\n display: block;\n }\n .lg\\:flex {\n display: flex;\n }\n .lg\\:hidden {\n display: none;\n }\n .lg\\:w-\\[500px\\] {\n width: 500px;\n }\n .lg\\:w-auto {\n width: auto;\n }\n .lg\\:max-w-\\[720px\\] {\n max-width: 720px;\n }\n .lg\\:flex-row {\n flex-direction: row;\n }\n .lg\\:flex-nowrap {\n flex-wrap: nowrap;\n }\n .lg\\:gap-y-16 {\n row-gap: 1rem;\n }\n .lg\\:px-28 {\n padding-left: 1.75rem;\n padding-right: 1.75rem;\n }\n .lg\\:\\!pl-12 {\n padding-left: 0.75rem !important;\n }\n .lg\\:\\!pr-12 {\n padding-right: 0.75rem !important;\n }\n}\n@media (min-width: 1024px) {\n .xl\\:pb-40 {\n padding-bottom: 2.5rem;\n }\n}\n@media (min-width: 2200px) {\n .xxxl\\:px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n }\n}\n\n";const EdsInputFieldStyle0=edsInputFieldCss;const EdsInputField=class{constructor(hostRef){registerInstance(this,hostRef);this.edsinput=createEvent(this,"edsinput",7);this.edschange=createEvent(this,"edschange",7);this.handleNativeInput=ev=>{var _a,_b;(_a=this.onInput)===null||_a===void 0?void 0:_a.call(this,ev);if(this.shouldEmitValue()){const target=ev.target;let value=target.value;if(this.type==='checkbox'&&((_b=this.parsedOptions)===null||_b===void 0?void 0:_b.length)>0){// checkbox group case
|
|
936
950
|
const checkboxes=this.hostEl.querySelectorAll(`input[type="checkbox"][name="${this.name}"]`);value=Array.from(checkboxes).filter(cb=>cb.checked).map(cb=>cb.value);}else if(this.type==='checkbox'){value=target.checked;}else if(this.type==='radio'){value=target.value;}else {value=target.value;}this.edsinput.emit({value});}};this.handleNativeChange=ev=>{var _a,_b;(_a=this.onChangeNative)===null||_a===void 0?void 0:_a.call(this,ev);if(this.shouldEmitValue()){const target=ev.target;let value=target.value;if(this.type==='checkbox'&&((_b=this.parsedOptions)===null||_b===void 0?void 0:_b.length)>0){// checkbox group case
|
|
937
951
|
const checkboxes=this.hostEl.querySelectorAll(`input[type="checkbox"][name="${this.name}"]`);value=Array.from(checkboxes).filter(cb=>cb.checked).map(cb=>cb.value);}else if(this.type==='checkbox'){value=target.checked;}else if(this.type==='radio'){value=target.value;}else {value=target.value;}this.edschange.emit({value});}};this.name=undefined;this.inputId=undefined;this.placeholder=undefined;this.disabled=false;this.required=false;this.label=undefined;this.hint=undefined;this.icon=undefined;this.link=undefined;this.message=undefined;this.error=false;this.checked=undefined;this.errorMessage=undefined;this.value=undefined;this.maxLength=undefined;this.min=undefined;this.max=undefined;this.step=undefined;this.options=undefined;this.type='text';this.onChangeNative=undefined;this.onInput=undefined;this.exposeValueEvents=true;}shouldEmitValue(){return this.exposeValueEvents&&this.type!=='password';}get parsedOptions(){if(Array.isArray(this.options)){return this.options;}if(typeof this.options==='string'){try{return JSON.parse(this.options);}catch(_a){// eslint-disable-next-line
|
|
938
|
-
console.warn('Invalid options format');return [];}}return [];}render(){const inputOpts=Object.assign({name:this.name,id:this.inputId,placeholder:this.placeholder,disabled:this.disabled,onInput:this.handleNativeInput,onChange:this.handleNativeChange,type:this.type,required:this.required,value:this.value,error:this.error,icon:this.icon,checked:this.checked},this.type==='number'?{min:this.min,max:this.max,step:this.step}:{});return h("div",{key:'
|
|
952
|
+
console.warn('Invalid options format');return [];}}return [];}render(){const inputOpts=Object.assign({name:this.name,id:this.inputId,placeholder:this.placeholder,disabled:this.disabled,onInput:this.handleNativeInput,onChange:this.handleNativeChange,type:this.type,required:this.required,value:this.value,error:this.error,icon:this.icon,checked:this.checked},this.type==='number'?{min:this.min,max:this.max,step:this.step}:{});return h("div",{key:'aca76f43840c0e8344d548610bc832cd75ff7bd9'},this.type==='checkbox'||this.type==='radio'?this.parsedOptions.length>0?h("fieldset",{class:"space-y-4"},h("div",{class:"flex justify-between mb-4"},this.label&&h("eds-input-label",{name:this.inputId||this.name,label:this.label,required:this.required}),this.hint&&h("p",{id:`${this.name}-hint`,class:"f-ui-05 text-lighter mt-8 ml-8"},this.hint)),this.parsedOptions.map(option=>h("div",{class:"flex items-center gap-x-4 gap-y-4",key:option.value},h("eds-input",Object.assign({},inputOpts,{value:option.value,checked:typeof this.value==='string'&&this.value.split(',').includes(String(option.value))})),h("label",{htmlFor:this.name,class:`input-label-options ${this.disabled?'text-lighter':''}`},option.label)))):h("div",{class:"flex items-center gap-x-8"},h("eds-input",Object.assign({},inputOpts,{value:this.value,checked:this.value==='on'||this.checked})),this.label&&h("eds-input-label",{name:this.inputId||this.name,label:this.label,disabled:this.disabled,required:this.required})):h("div",null,h("div",{class:"flex justify-between mb-4"},this.label&&h("eds-input-label",{name:this.inputId||this.name,label:this.label,disabled:this.disabled,required:this.required}),this.hint&&h("p",{id:`${this.name}-hint`,class:"f-ui-05 text-lighter mt-8 ml-8"},this.hint)),this.type==='select'?h("eds-input-select",Object.assign({},inputOpts,{options:this.parsedOptions})):this.type==='file'?h("input",{type:"file",id:this.inputId||this.name,name:this.name,onChange:this.onChangeNative,disabled:this.disabled,required:this.required}):this.type==='search'?h("eds-input-search",{name:"search-box"}):this.type==='range'?(()=>{var _a,_b,_c;const rangeProps={name:inputOpts.name,inputId:inputOpts.id||inputOpts.name,disabled:inputOpts.disabled,required:inputOpts.required,onInput:inputOpts.onInput,onChange:inputOpts.onChange};const opt=this.parsedOptions;const numberValue=typeof this.value==='string'?parseFloat(this.value):this.value||0;return h("eds-input-range",Object.assign({},rangeProps,{min:(_a=opt[0])===null||_a===void 0?void 0:_a.value,max:(_b=opt[1])===null||_b===void 0?void 0:_b.value,step:(_c=opt[2])===null||_c===void 0?void 0:_c.value,value:numberValue}));})():h("eds-input",Object.assign({},inputOpts))),h("div",{key:'27dc5705b9627fb597b04837b488326371fac2e2',class:"mt-6"},h("eds-input-footer",{key:'6e73fb80b91de81ee22cb33b7589916b7eb882fe',id:`${this.name}-footer`,name:this.name,message:this.message,"error-message":this.errorMessage,error:this.error,link:this.link})));}static get delegatesFocus(){return true;}get hostEl(){return getElement(this);}};EdsInputField.style=EdsInputFieldStyle0;const edsInputFooterCss="p{margin:0}.text-error{color:var(--red-700)}.flex{display:flex}.items-center{align-items:center}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.ml-4{margin-left:0.25rem}.mb-4{margin-bottom:0.25rem}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.text-lighter{color:var(--grey-600)}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:text-lighter:hover{color:var(--grey-600)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}";const EdsInputFooterStyle0=edsInputFooterCss;const EdsInputFooter=class{constructor(hostRef){registerInstance(this,hostRef);this.name=undefined;this.errorMessage=undefined;this.message=undefined;this.error=false;this.link=undefined;}render(){return h("div",{key:'6c045ff40d674a27cf4fe4c1a125251edd7455ab'},this.error&&this.errorMessage&&h("div",{key:'d6edd41359f7efb8f0a3bce487b852c1b26c035a',id:`error_${this.name}`,class:"text-error flex items-center"},h("eds-icon-wrapper",{key:'cd24f34b58c81f00046cc1d90a5b993928e72be8',icon:"warning"}),h("p",{key:'bf718bcf0e04c5af1924381f567d5921bd43edec',class:"f-ui-04 ml-4 mb-4",innerHTML:this.errorMessage})),this.message&&h("p",{key:'4ea38b231e7b7fba679a05c12773a486aa3201bc',id:`desc_${this.name}`,class:"f-ui-05 text-lighter",innerHTML:this.message}),this.link&&h("eds-link",{key:'e2e1255c198b707abb2b2194100b83f7b00de9e7',label:this.link.label,url:this.link.url,intent:"underline",size:"small",external:true}));}};EdsInputFooter.style=EdsInputFooterStyle0;const edsInputLabelCss=".input-label{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.input-label b,.input-label strong{font-weight:var(--f-ui-02---bold-weight, bold)}.text-lighter{color:var(--grey-600)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";const EdsInputLabelStyle0=edsInputLabelCss;const EdsInputLabel=class{constructor(hostRef){registerInstance(this,hostRef);this.label=undefined;this.name=undefined;this.required=false;this.disabled=false;}render(){return h("label",{key:'5e97f430a0ef1cdc4d0b28618d78402991fda8fe',htmlFor:this.name,class:`input-label ${this.disabled?'text-lighter':''}`},this.label,this.required&&h("span",{key:'fedf93c4b037f387c4aad3ffab354de94de564d3'},h("span",{key:'72ae856c25308b676d84d7ee0bf214362218a203',"aria-hidden":"true"},"*"),h("span",{key:'39fcf9a2b39a0207eb0b6f62c16183885c98f145',class:"sr-only"},"required")));}};EdsInputLabel.style=EdsInputLabelStyle0;const EdsInputRange=class{constructor(hostRef){registerInstance(this,hostRef);this.edsrange=createEvent(this,"edsrange",7);this.onInput=e=>{const target=e.target;this.sliderVal=parseInt(target.value,10);// Update the slider value dynamically
|
|
939
953
|
};this.onChange=e=>{const target=e.target;this.sliderVal=parseInt(target.value,10);// Update the slider value dynamically
|
|
940
954
|
this.edsrange.emit(this.sliderVal);};this.name=undefined;this.inputId='range';this.disabled=false;this.required=false;this.min=0;this.max=100;this.step=1;this.value=undefined;this.sliderVal=undefined;}componentWillLoad(){this.sliderVal=this.value!==undefined?this.value:this.max%2===0?this.max/2:Math.ceil(this.max/2);}// Keep the internal state in sync when the passed value changes.
|
|
941
955
|
onValueChange(newVal){if(newVal!==undefined){this.sliderVal=newVal;}}componentDidLoad(){// Assign the native input element after the component loads
|
|
942
956
|
this.inputElement=this.el.querySelector('input');}async getInputElement(){// Return the native input element
|
|
943
|
-
return this.inputElement;}render(){return h("div",{key:'
|
|
957
|
+
return this.inputElement;}render(){return h("div",{key:'c8106420cb482123e72c8e5b00079d9921749290',class:"relative flex flex-col items-start"},h("input",{key:'752dfbeb9fb73c8a4b5ad874461b63e73477ca99',id:this.inputId||this.name,name:this.name,min:this.min,max:this.max,step:this.step,value:this.sliderVal,required:this.required,disabled:this.disabled,type:"range",class:"w-full py-6 input",tabindex:"0",role:"slider","aria-describedby":`desc_${this.name}`,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.sliderVal,onInput:this.onInput,onChange:this.onChange}),h("p",{key:'de123d07b20996d3f0c7c5baff788ab42fa0a386',id:`desc_${this.name}`,class:"block f-ui-05 mt-4 text-lighter"},"Current value: ",this.sliderVal));}get el(){return getElement(this);}static get watchers(){return {"value":["onValueChange"]};}};const EdsInputSearch=class{constructor(hostRef){registerInstance(this,hostRef);this.search=createEvent(this,"search",7);/**
|
|
944
958
|
* Keydown event listener to detect Command+K (Mac) or Ctrl+K (Windows/Linux)
|
|
945
959
|
* and focus the input element when triggered.
|
|
946
960
|
*
|
|
@@ -954,27 +968,27 @@ if(this.inputElement&&!this.disabled){this.inputElement.focus();}}};/*onInput =
|
|
|
954
968
|
this.search.emit({event:'change',value:e.target.value});sendAnalytics({category:'ui-component',parentContext:null,tag:this.el.tagName.toLowerCase(),name:e.target.value||'',action:'search'});};this.name=undefined;this.inputId='search-main';this.placeholder='Search...';this.value=undefined;this.disabled=false;this.required=false;this.decorate=undefined;this.label='Search';}componentDidLoad(){// Assign the native input element after the component loads
|
|
955
969
|
this.inputElement=this.el.querySelector('input');document.addEventListener('keydown',this.keydownListener);}disconnectedCallback(){// Clean up the event listener when the component is removed
|
|
956
970
|
document.removeEventListener('keydown',this.keydownListener);}async getInputElement(){// Return the native input element
|
|
957
|
-
return this.inputElement;}render(){return h("div",{key:'
|
|
958
|
-
onChange:this.onChange}));}get el(){return getElement(this);}};const EdsInputSelect=class{constructor(hostRef){registerInstance(this,hostRef);this.edsselect=createEvent(this,"edsselect",7);this.handleChange=event=>{const target=event.target;this.edsselect.emit(target.value);};this.inputId=undefined;this.name=undefined;this.placeholder=undefined;this.disabled=false;this.hasMessage=false;this.error=false;this.required=false;this.options=[];this.value=undefined;}render(){const selectId=this.inputId||this.name;const placeholderText=this.placeholder||`Pick from the list`;const describedBy=this.hasMessage||this.error?`${this.name}-error`:undefined;return h("div",{key:'b28b21c38ed5848cf08c0bc626f4ce32eddfb775',class:"relative"},h("select",{key:'727f578d43cf12568d3d3b35548a30972fc46300',id:selectId,name:this.name,class:{input:true,'input-error':this.error,'px-4':true,'py-2':true},"aria-invalid":this.error?'true':'false',"aria-describedby":describedBy,disabled:this.disabled,required:this.required,onChange:this.handleChange},h("option",{key:'9283f69f3c723d65243d8f38b92ee2fcd16d187e',value:"",disabled:true,hidden:true},placeholderText),this.options.map((opt,index)=>h("option",{key:index,value:opt.value,selected:opt.value===this.value},opt.label))),h("span",{key:'63a0a9fc049f10141697028195aa28abb8d246f2',class:"bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center"},h("eds-icon-wrapper",{key:'aa756ea1d279a03ca7919518a15cd63b368a20a0',class:"w-20 h-20",icon:"chevron-right"})));}};const edsLinkCss="*,\n::before,\n::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: currentColor;\n /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n\n.f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n.f-ui-04 {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n\n.f-body-01 b,\n.f-body-01 strong {\n font-weight: var(--f-body-01---bold-weight, bold);\n}\n\n.f-body-02 b,\n.f-body-02 strong {\n font-weight: var(--f-body-02---bold-weight, bold);\n}\n\n.f-ui-01 b,\n.f-ui-01 strong {\n font-weight: var(--f-ui-01---bold-weight, bold);\n}\n\n.f-ui-02 b,\n.f-ui-02 strong {\n font-weight: var(--f-ui-02---bold-weight, bold);\n}\n\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n\n &::after {\n content: '';\n }\n}\n\n.loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n}\n\n/** region TRANSITIONS */\n.effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n/** endregion */\n/* region FOCUS */\n.effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus:focus-visible {\n outline-style: solid;\n}\n\n.effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus-within:focus-within {\n outline-style: solid;\n}\n\n.effect-bg-behind-link {\n position: relative;\n}\n\n.effect-bg-behind-link::before {\n position: absolute;\n top: 0rem;\n bottom: 0rem;\n left: -0.5rem;\n right: 0rem;\n z-index: 0;\n border-radius: 8px;\n background-color: var(--grey-400);\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.effect-bg-behind-link[aria-disabled=\"true\"]::before {\n background-color: var(--transparent);\n}\n\n/* endregion */\n/*region shadow*/\n/*endregion*/\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.visible {\n visibility: visible;\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.sticky {\n position: sticky;\n}\n\n.-top-1 {\n top: -0.0625rem;\n}\n\n.z-0 {\n z-index: 0;\n}\n\n.z-1 {\n z-index: 1;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.-ml-8 {\n margin-left: -0.5rem;\n}\n\n.-ml-16 {\n margin-left: -1rem;\n}\n\n.-mr-4 {\n margin-right: -0.25rem;\n}\n\n.-mr-8 {\n margin-right: -0.5rem;\n}\n\n.-mr-16 {\n margin-right: -1rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.ml-4 {\n margin-left: 0.25rem;\n}\n\n.ml-64 {\n margin-left: 4rem;\n}\n\n.ml-8 {\n margin-left: 0.5rem;\n}\n\n.ml-auto {\n margin-left: auto;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.mr-2 {\n margin-right: 0.125rem;\n}\n\n.mr-4 {\n margin-right: 0.25rem;\n}\n\n.mr-8 {\n margin-right: 0.5rem;\n}\n\n.mr-auto {\n margin-right: auto;\n}\n\n.block {\n display: block;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.inline {\n display: inline;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.hidden {\n display: none;\n}\n\n.h-20 {\n height: 1.25rem;\n}\n\n.h-24 {\n height: 1.5rem;\n}\n\n.h-36 {\n height: 2.25rem;\n}\n\n.h-44 {\n height: 2.75rem;\n}\n\n.\\!min-h-0 {\n min-height: 0rem !important;\n}\n\n.\\!min-h-20 {\n min-height: 1.25rem !important;\n}\n\n.min-h-36 {\n min-height: 2.25rem;\n}\n\n.min-h-44 {\n min-height: 2.75rem;\n}\n\n.min-h-full {\n min-height: 100%;\n}\n\n.min-h-screen {\n min-height: 100vh;\n}\n\n.w-1\\/2 {\n width: 50%;\n}\n\n.w-20 {\n width: 1.25rem;\n}\n\n.w-24 {\n width: 1.5rem;\n}\n\n.w-28 {\n width: 1.75rem;\n}\n\n.w-32 {\n width: 2rem;\n}\n\n.w-4 {\n width: 0.25rem;\n}\n\n.w-44 {\n width: 2.75rem;\n}\n\n.w-auto {\n width: auto;\n}\n\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.w-full {\n width: 100%;\n}\n\n.max-w-full {\n max-width: 100%;\n}\n\n.flex-none {\n flex: none;\n}\n\n.grow {\n flex-grow: 1;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.resize {\n resize: both;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.flex-wrap {\n flex-wrap: wrap;\n}\n\n.items-start {\n align-items: flex-start;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.whitespace-nowrap {\n white-space: nowrap;\n}\n\n.break-words {\n overflow-wrap: break-word;\n}\n\n.rounded {\n border-radius: 0.25rem;\n}\n\n.rounded-sm {\n border-radius: 8px;\n}\n\n.rounded-xs {\n border-radius: 4px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-soft {\n border-color: rgba(0, 0, 0, .15);\n}\n\n.border-softer {\n border-color: rgba(0, 0, 0, .1);\n}\n\n.border-softest {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.border-transparent {\n border-color: var(--transparent);\n}\n\n.border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1);\n}\n\n.\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n}\n\n.\\!bg-darker {\n background-color: var(--grey-400) !important;\n}\n\n.\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n}\n\n.bg-accent {\n background-color: var(--green-500);\n}\n\n.bg-accent-dark {\n background-color: var(--green-600);\n}\n\n.bg-accent-darker {\n background-color: var(--green-800);\n}\n\n.bg-current {\n background-color: currentColor;\n}\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-darker {\n background-color: var(--grey-400);\n}\n\n.bg-default {\n background-color: var(--grey-200);\n}\n\n.bg-inverse {\n background-color: var(--white);\n}\n\n.bg-inverse-soft {\n background-color: rgba(255, 255, 255, .2);\n}\n\n.bg-inverse-softer {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n}\n\n.bg-strong {\n background-color: var(--grey-700);\n}\n\n.bg-strong-dark {\n background-color: var(--grey-800);\n}\n\n.bg-stronger {\n background-color: var(--grey-900);\n}\n\n.bg-strongest {\n background-color: var(--black);\n}\n\n.bg-transparent {\n background-color: var(--transparent);\n}\n\n.\\!p-8 {\n padding: 0.5rem !important;\n}\n\n.\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n}\n\n.\\!py-0 {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n}\n\n.\\!py-4 {\n padding-top: 0.25rem !important;\n padding-bottom: 0.25rem !important;\n}\n\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.px-2 {\n padding-left: 0.125rem;\n padding-right: 0.125rem;\n}\n\n.px-20 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.px-4 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-4 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.py-6 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.\\!pt-4 {\n padding-top: 0.25rem !important;\n}\n\n.pl-12 {\n padding-left: 0.75rem;\n}\n\n.pl-28 {\n padding-left: 1.75rem;\n}\n\n.pl-32 {\n padding-left: 2rem;\n}\n\n.pl-36 {\n padding-left: 2.25rem;\n}\n\n.pl-4 {\n padding-left: 0.25rem;\n}\n\n.pl-8 {\n padding-left: 0.5rem;\n}\n\n.pr-12 {\n padding-right: 0.75rem;\n}\n\n.pr-28 {\n padding-right: 1.75rem;\n}\n\n.pr-32 {\n padding-right: 2rem;\n}\n\n.pr-4 {\n padding-right: 0.25rem;\n}\n\n.pr-8 {\n padding-right: 0.5rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.\\!text-current {\n color: currentColor !important;\n}\n\n.text-\\[\\#0034CB\\] {\n --tw-text-opacity: 1;\n color: rgb(0 52 203 / var(--tw-text-opacity));\n}\n\n.text-accent {\n color: var(--green-500);\n}\n\n.text-current {\n color: currentColor;\n}\n\n.text-default {\n color: var(--black);\n}\n\n.text-error {\n color: var(--red-700);\n}\n\n.text-extra-light {\n color: var(--grey-300);\n}\n\n.text-inverse {\n color: var(--white);\n}\n\n.text-light {\n color: var(--grey-700);\n}\n\n.text-lighter {\n color: var(--grey-600);\n}\n\n.text-lightest {\n color: var(--grey-500);\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.\\!no-underline {\n text-decoration-line: none !important;\n}\n\n.decoration-\\[\\#0034CB\\] {\n text-decoration-color: #0034CB;\n}\n\n.decoration-accent {\n text-decoration-color: var(--green-500);\n}\n\n.decoration-2 {\n text-decoration-thickness: 2px;\n}\n\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.outline {\n outline-style: solid;\n}\n\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n[class*=underline-] {\n text-decoration-line: underline;\n}\n\n.underline-offset-4 {\n text-underline-offset: 0.2em;\n}\n\n.\\@container {\n container-type: inline-size;\n}\n\n.after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.before\\:effect-opacity::before {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n}\n\n.focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n}\n\n.hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n}\n\n.hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n}\n\n.hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n}\n\n.hover\\:bg-default:hover {\n background-color: var(--grey-200);\n}\n\n.hover\\:bg-inverse:hover {\n background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n}\n\n.hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n}\n\n.hover\\:text-default:hover {\n color: var(--black);\n}\n\n.hover\\:text-lighter:hover {\n color: var(--grey-600);\n}\n\n.hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus-visible\\:rounded-xs:focus-visible {\n border-radius: 4px;\n}\n\n.focus-visible\\:text-default:focus-visible {\n color: var(--black);\n}\n\n.focus-visible\\:outline-none:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus-visible\\:ring:focus-visible {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n}\n\n.disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-disabled\\:no-underline[aria-disabled=\"true\"] {\n text-decoration-line: none;\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n}\n\n.after\\:absolute::after {\n position: absolute;\n}\n\n.after\\:inset-0::after {\n inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n}\n\n.after\\:bottom-0::after {\n bottom: 0rem;\n}\n\n.after\\:left-16::after {\n left: 1rem;\n}\n\n.after\\:right-16::after {\n right: 1rem;\n}\n\n.after\\:z-10::after {\n z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n}\n\n.after\\:border-accent::after {\n border-color: var(--green-500);\n}\n\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.after\\:opacity-0::after {\n opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n}\n\n.before\\:absolute::before {\n position: absolute;\n}\n\n.before\\:inset-x-0::before {\n left: 0rem;\n right: 0rem;\n}\n\n.before\\:-bottom-2::before {\n bottom: -0.125rem;\n}\n\n.before\\:bottom-0::before {\n bottom: 0rem;\n}\n\n.before\\:h-12::before {\n height: 0.75rem;\n}\n\n.before\\:h-3::before {\n height: 0.1875rem;\n}\n\n.before\\:rounded-lg::before {\n border-radius: 16px;\n}\n\n.before\\:border-2::before {\n border-width: 2px;\n}\n\n.before\\:border-softest::before {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.before\\:bg-default::before {\n background-color: var(--grey-200);\n}\n\n.before\\:bg-inverse-softer::before {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.before\\:\\!opacity-100::before {\n opacity: 1 !important;\n}\n\n.before\\:opacity-0::before {\n opacity: 0;\n}\n\n.before\\:opacity-5::before {\n opacity: 0.05;\n}\n\n.before\\:content-\\[\\'\\'\\]::before {\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.before\\:bg-gradient-y::before {\n background: linear-gradient(to bottom, transparent, ease-in-out, black);\n}\n\n.before\\:bg-gradient-01-top::before {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-01-bottom::before {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-02-top::before {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-02-bottom::before {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-03-top::before {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-03-bottom::before {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-04-top::before {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-04-bottom::before {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n}\n\n.focus-visible\\:before\\:\\!opacity-0:focus-visible::before {\n opacity: 0 !important;\n}\n\n.focus-visible\\:before\\:opacity-0:focus-visible::before {\n opacity: 0;\n}\n\n@media (min-width: 900px) {\n .lg\\:flex {\n display: flex;\n }\n}";const EdsLinkStyle0=edsLinkCss;// Define the CVA for link styles
|
|
971
|
+
return this.inputElement;}render(){return h("div",{key:'f8484e4e4a971db07a75ca91b66d4b3cddd5cee9',class:"relative flex items-center"},h("eds-icon-wrapper",{key:'68782ac168c062564d6378bc1bc62e58efeb3555',icon:"search",class:"absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest","aria-hidden":"true"}),h("input",{key:'c59e9b91f214fc94fc4fb4c991c3e667ea3c24ae',id:this.inputId||this.name,name:this.name,placeholder:this.placeholder,value:this.value||'',required:this.required,disabled:this.disabled,type:"search","aria-label":this.placeholder,class:`input pl-36 ${this.decorate}`,//onInput={this.onInput}
|
|
972
|
+
onChange:this.onChange}));}get el(){return getElement(this);}};const EdsInputSelect=class{constructor(hostRef){registerInstance(this,hostRef);this.edsselect=createEvent(this,"edsselect",7);this.handleChange=event=>{const target=event.target;this.edsselect.emit(target.value);};this.inputId=undefined;this.name=undefined;this.placeholder=undefined;this.disabled=false;this.hasMessage=false;this.error=false;this.required=false;this.options=[];this.value=undefined;}render(){const selectId=this.inputId||this.name;const placeholderText=this.placeholder||`Pick from the list`;const describedBy=this.hasMessage||this.error?`${this.name}-error`:undefined;return h("div",{key:'7f6a81c0f3d1f998c2bd671722cd06992b382540',class:"relative"},h("select",{key:'3e62519e3973cf1136cda70a3af1cc2a2e093451',id:selectId,name:this.name,class:{input:true,'input-error':this.error,'px-4':true,'py-2':true},"aria-invalid":this.error?'true':'false',"aria-describedby":describedBy,disabled:this.disabled,required:this.required,onChange:this.handleChange},h("option",{key:'4292bd21e8c912f3bb0bc727ed2657051a3e03b8',value:"",disabled:true,hidden:true},placeholderText),this.options.map((opt,index)=>h("option",{key:index,value:opt.value,selected:opt.value===this.value},opt.label))),h("span",{key:'a03c59be80950fd17a89b0adc693654e99496018',class:"bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center"},h("eds-icon-wrapper",{key:'0183976264d130c3c12b30c829fae36512607ac4',class:"w-20 h-20",icon:"chevron-right"})));}};const edsLinkCss="*,\n::before,\n::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: currentColor;\n /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n\n.f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n.f-ui-04 {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n\n.f-body-01 b,\n.f-body-01 strong {\n font-weight: var(--f-body-01---bold-weight, bold);\n}\n\n.f-body-02 b,\n.f-body-02 strong {\n font-weight: var(--f-body-02---bold-weight, bold);\n}\n\n.f-ui-01 b,\n.f-ui-01 strong {\n font-weight: var(--f-ui-01---bold-weight, bold);\n}\n\n.f-ui-02 b,\n.f-ui-02 strong {\n font-weight: var(--f-ui-02---bold-weight, bold);\n}\n\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n\n &::after {\n content: '';\n }\n}\n\n.loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n}\n\n/** region TRANSITIONS */\n.effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n/** endregion */\n/* region FOCUS */\n.effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus:focus-visible {\n outline-style: solid;\n}\n\n.effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus-within:focus-within {\n outline-style: solid;\n}\n\n.effect-bg-behind-link {\n position: relative;\n}\n\n.effect-bg-behind-link::before {\n position: absolute;\n top: 0rem;\n bottom: 0rem;\n left: -0.5rem;\n right: 0rem;\n z-index: 0;\n border-radius: 8px;\n background-color: var(--grey-400);\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.effect-bg-behind-link[aria-disabled=\"true\"]::before {\n background-color: var(--transparent);\n}\n\n/* endregion */\n/*region shadow*/\n/*endregion*/\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.visible {\n visibility: visible;\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.sticky {\n position: sticky;\n}\n\n.-top-1 {\n top: -0.0625rem;\n}\n\n.z-0 {\n z-index: 0;\n}\n\n.z-1 {\n z-index: 1;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.-ml-8 {\n margin-left: -0.5rem;\n}\n\n.-ml-16 {\n margin-left: -1rem;\n}\n\n.-mr-4 {\n margin-right: -0.25rem;\n}\n\n.-mr-8 {\n margin-right: -0.5rem;\n}\n\n.-mr-16 {\n margin-right: -1rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.ml-4 {\n margin-left: 0.25rem;\n}\n\n.ml-64 {\n margin-left: 4rem;\n}\n\n.ml-8 {\n margin-left: 0.5rem;\n}\n\n.ml-auto {\n margin-left: auto;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.mr-2 {\n margin-right: 0.125rem;\n}\n\n.mr-4 {\n margin-right: 0.25rem;\n}\n\n.mr-8 {\n margin-right: 0.5rem;\n}\n\n.mr-auto {\n margin-right: auto;\n}\n\n.block {\n display: block;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.inline {\n display: inline;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.hidden {\n display: none;\n}\n\n.h-20 {\n height: 1.25rem;\n}\n\n.h-24 {\n height: 1.5rem;\n}\n\n.h-36 {\n height: 2.25rem;\n}\n\n.h-44 {\n height: 2.75rem;\n}\n\n.\\!min-h-0 {\n min-height: 0rem !important;\n}\n\n.\\!min-h-20 {\n min-height: 1.25rem !important;\n}\n\n.min-h-36 {\n min-height: 2.25rem;\n}\n\n.min-h-44 {\n min-height: 2.75rem;\n}\n\n.min-h-full {\n min-height: 100%;\n}\n\n.min-h-screen {\n min-height: 100vh;\n}\n\n.w-1\\/2 {\n width: 50%;\n}\n\n.w-20 {\n width: 1.25rem;\n}\n\n.w-24 {\n width: 1.5rem;\n}\n\n.w-28 {\n width: 1.75rem;\n}\n\n.w-32 {\n width: 2rem;\n}\n\n.w-4 {\n width: 0.25rem;\n}\n\n.w-44 {\n width: 2.75rem;\n}\n\n.w-auto {\n width: auto;\n}\n\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.w-full {\n width: 100%;\n}\n\n.max-w-full {\n max-width: 100%;\n}\n\n.flex-none {\n flex: none;\n}\n\n.grow {\n flex-grow: 1;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.resize {\n resize: both;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.flex-wrap {\n flex-wrap: wrap;\n}\n\n.items-start {\n align-items: flex-start;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.whitespace-nowrap {\n white-space: nowrap;\n}\n\n.break-words {\n overflow-wrap: break-word;\n}\n\n.rounded {\n border-radius: 0.25rem;\n}\n\n.rounded-sm {\n border-radius: 8px;\n}\n\n.rounded-xs {\n border-radius: 4px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-soft {\n border-color: rgba(0, 0, 0, .15);\n}\n\n.border-softer {\n border-color: rgba(0, 0, 0, .1);\n}\n\n.border-softest {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.border-transparent {\n border-color: var(--transparent);\n}\n\n.border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1);\n}\n\n.\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n}\n\n.\\!bg-darker {\n background-color: var(--grey-400) !important;\n}\n\n.\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n}\n\n.bg-accent {\n background-color: var(--green-500);\n}\n\n.bg-accent-dark {\n background-color: var(--green-600);\n}\n\n.bg-accent-darker {\n background-color: var(--green-800);\n}\n\n.bg-current {\n background-color: currentColor;\n}\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-darker {\n background-color: var(--grey-400);\n}\n\n.bg-default {\n background-color: var(--grey-200);\n}\n\n.bg-inverse {\n background-color: var(--white);\n}\n\n.bg-inverse-soft {\n background-color: rgba(255, 255, 255, .2);\n}\n\n.bg-inverse-softer {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n}\n\n.bg-strong {\n background-color: var(--grey-700);\n}\n\n.bg-strong-dark {\n background-color: var(--grey-800);\n}\n\n.bg-stronger {\n background-color: var(--grey-900);\n}\n\n.bg-strongest {\n background-color: var(--black);\n}\n\n.bg-transparent {\n background-color: var(--transparent);\n}\n\n.\\!p-8 {\n padding: 0.5rem !important;\n}\n\n.\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n}\n\n.\\!py-0 {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n}\n\n.\\!py-4 {\n padding-top: 0.25rem !important;\n padding-bottom: 0.25rem !important;\n}\n\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.px-2 {\n padding-left: 0.125rem;\n padding-right: 0.125rem;\n}\n\n.px-20 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.px-4 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-4 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.py-6 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.\\!pt-4 {\n padding-top: 0.25rem !important;\n}\n\n.pl-12 {\n padding-left: 0.75rem;\n}\n\n.pl-28 {\n padding-left: 1.75rem;\n}\n\n.pl-32 {\n padding-left: 2rem;\n}\n\n.pl-36 {\n padding-left: 2.25rem;\n}\n\n.pl-4 {\n padding-left: 0.25rem;\n}\n\n.pl-8 {\n padding-left: 0.5rem;\n}\n\n.pr-12 {\n padding-right: 0.75rem;\n}\n\n.pr-28 {\n padding-right: 1.75rem;\n}\n\n.pr-32 {\n padding-right: 2rem;\n}\n\n.pr-4 {\n padding-right: 0.25rem;\n}\n\n.pr-8 {\n padding-right: 0.5rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.\\!text-current {\n color: currentColor !important;\n}\n\n.text-\\[\\#0034CB\\] {\n --tw-text-opacity: 1;\n color: rgb(0 52 203 / var(--tw-text-opacity));\n}\n\n.text-accent {\n color: var(--green-500);\n}\n\n.text-current {\n color: currentColor;\n}\n\n.text-default {\n color: var(--black);\n}\n\n.text-error {\n color: var(--red-700);\n}\n\n.text-extra-light {\n color: var(--grey-300);\n}\n\n.text-inverse {\n color: var(--white);\n}\n\n.text-light {\n color: var(--grey-700);\n}\n\n.text-lighter {\n color: var(--grey-600);\n}\n\n.text-lightest {\n color: var(--grey-500);\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.\\!no-underline {\n text-decoration-line: none !important;\n}\n\n.decoration-\\[\\#0034CB\\] {\n text-decoration-color: #0034CB;\n}\n\n.decoration-accent {\n text-decoration-color: var(--green-500);\n}\n\n.decoration-2 {\n text-decoration-thickness: 2px;\n}\n\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.outline {\n outline-style: solid;\n}\n\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n[class*=underline-] {\n text-decoration-line: underline;\n}\n\n.underline-offset-4 {\n text-underline-offset: 0.2em;\n}\n\n.\\@container {\n container-type: inline-size;\n}\n\n.after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.before\\:effect-opacity::before {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n}\n\n.focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n}\n\n.hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n}\n\n.hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n}\n\n.hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n}\n\n.hover\\:bg-default:hover {\n background-color: var(--grey-200);\n}\n\n.hover\\:bg-inverse:hover {\n background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n}\n\n.hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n}\n\n.hover\\:text-default:hover {\n color: var(--black);\n}\n\n.hover\\:text-lighter:hover {\n color: var(--grey-600);\n}\n\n.hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus-visible\\:rounded-xs:focus-visible {\n border-radius: 4px;\n}\n\n.focus-visible\\:text-default:focus-visible {\n color: var(--black);\n}\n\n.focus-visible\\:outline-none:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus-visible\\:ring:focus-visible {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n}\n\n.disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-disabled\\:no-underline[aria-disabled=\"true\"] {\n text-decoration-line: none;\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n}\n\n.after\\:absolute::after {\n position: absolute;\n}\n\n.after\\:inset-0::after {\n inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n}\n\n.after\\:bottom-0::after {\n bottom: 0rem;\n}\n\n.after\\:left-16::after {\n left: 1rem;\n}\n\n.after\\:right-16::after {\n right: 1rem;\n}\n\n.after\\:z-10::after {\n z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n}\n\n.after\\:border-accent::after {\n border-color: var(--green-500);\n}\n\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.after\\:opacity-0::after {\n opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n}\n\n.before\\:absolute::before {\n position: absolute;\n}\n\n.before\\:inset-x-0::before {\n left: 0rem;\n right: 0rem;\n}\n\n.before\\:-bottom-2::before {\n bottom: -0.125rem;\n}\n\n.before\\:bottom-0::before {\n bottom: 0rem;\n}\n\n.before\\:h-12::before {\n height: 0.75rem;\n}\n\n.before\\:h-3::before {\n height: 0.1875rem;\n}\n\n.before\\:rounded-lg::before {\n border-radius: 16px;\n}\n\n.before\\:border-2::before {\n border-width: 2px;\n}\n\n.before\\:border-softest::before {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.before\\:bg-default::before {\n background-color: var(--grey-200);\n}\n\n.before\\:bg-inverse-softer::before {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.before\\:\\!opacity-100::before {\n opacity: 1 !important;\n}\n\n.before\\:opacity-0::before {\n opacity: 0;\n}\n\n.before\\:opacity-5::before {\n opacity: 0.05;\n}\n\n.before\\:content-\\[\\'\\'\\]::before {\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.before\\:bg-gradient-y::before {\n background: linear-gradient(to bottom, transparent, ease-in-out, black);\n}\n\n.before\\:bg-gradient-01-top::before {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-01-bottom::before {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-02-top::before {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-02-bottom::before {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-03-top::before {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-03-bottom::before {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-04-top::before {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-04-bottom::before {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n}\n\n.focus-visible\\:before\\:\\!opacity-0:focus-visible::before {\n opacity: 0 !important;\n}\n\n.focus-visible\\:before\\:opacity-0:focus-visible::before {\n opacity: 0;\n}\n\n@media (min-width: 900px) {\n .lg\\:flex {\n display: flex;\n }\n}";const EdsLinkStyle0=edsLinkCss;// Define the CVA for link styles
|
|
959
973
|
const linkStyles=cva(['relative inline-flex justify-center items-center py-8 rounded-sm','effect-color effect-focus aria-disabled:text-lightest','cursor-pointer','aria-disabled:bg-dark aria-disabled:cursor-not-allowed aria-disabled:!border-transparent aria-disabled:after:!border-transparent'],{variants:{intent:{primary:['border-inside bg-accent hover:bg-accent-dark','shadow-accent focus:shadow-none aria-disabled:shadow-none'],secondary:['border-inside border-inside-inverse bg-strongest hover:bg-strong-dark text-inverse'],tertiary:'border-inside after:border-softest bg-dark hover:bg-darker',ghost:['border-inside hover:bg-darker'],strong:['!px-0 !py-4 !min-h-20','before:opacity-0 effect-opacity','hover:before:opacity-100 focus-visible:before:opacity-0','aria-disabled:bg-transparent aria-disabled:text-light'// aria-disabled:line-through
|
|
960
974
|
],weak:['!px-0 !py-4 !min-h-20','text-light hover:text-default','before:opacity-0 effect-opacity','hover:before:opacity-100 focus-visible:before:!opacity-0','aria-disabled:bg-transparent aria-disabled:text-light'// aria-disabled:line-through
|
|
961
975
|
],inverse:['!px-0 !py-4 !min-h-20','text-inverse','effect-bg-behind-link before:bg-inverse-softer before:opacity-0 effect-opacity','hover:before:opacity-100 focus-visible:before:!opacity-0','aria-disabled:bg-transparent'// aria-disabled:line-through
|
|
962
976
|
],blueish:['!px-0 !py-0 !min-h-20 text-[#0034CB] decoration-[#0034CB] underline underline-offset-4','effect-focus focus-visible:rounded-xs','hover:no-underline','aria-disabled:bg-transparent aria-disabled:no-underline'//aria-disabled:line-through
|
|
963
|
-
],underline:['decoration-accent underline underline-offset-4 !px-0 !py-0','hover:no-underline effect-focus focus-visible:rounded-xs !min-h-0']},iconSmall:{true:'',false:''},isActive:{true:'',false:''},hasIcon:{true:'',false:''},size:{
|
|
964
|
-
{intent:'primary',isActive:true,class:'!bg-accent-dark'},{intent:'secondary',isActive:true,class:'!bg-strong-dark'},{intent:'tertiary',isActive:true,class:'!bg-darker'},{intent:'ghost',isActive:true,class:'!bg-darker'},{intent:'strong',isActive:true,class:'before:!opacity-100'},{intent:'weak',isActive:true,class:'before:!opacity-100'},{intent:'inverse',isActive:true,class:'before:!opacity-100'}],defaultVariants:{//intent: 'primary',
|
|
977
|
+
],underline:['decoration-accent underline underline-offset-4 !px-0 !py-0','hover:no-underline effect-focus focus-visible:rounded-xs !min-h-0']},iconSmall:{true:'',false:''},isActive:{true:'',false:''},hasIcon:{true:'',false:''},size:{small:'min-h-36 f-ui-02 px-12',large:'min-h-44 f-ui-01 px-16'}},compoundVariants:[{iconSmall:true,size:'small',class:'pr-4'},{iconSmall:true,size:'large',class:'pr-8'},{intent:'blueish',hasIcon:true,class:'-mr-4 -top-1'},{intent:'underline',hasIcon:true,class:'-mr-4 -top-1'},// Active state
|
|
978
|
+
{intent:'primary',isActive:true,class:'!bg-accent-dark'},{intent:'secondary',isActive:true,class:'!bg-strong-dark'},{intent:'tertiary',isActive:true,class:'!bg-darker'},{intent:'ghost',isActive:true,class:'!bg-darker'},{intent:'strong',isActive:true,class:'before:!opacity-100'},{intent:'weak',isActive:true,class:'before:!opacity-100'},{intent:'inverse',isActive:true,class:'before:!opacity-100'},{intent:'underline',size:'small',class:'!px-0 !py-0 !min-h-0 f-ui-02'},{intent:'underline',size:'large',class:'!px-0 !py-0 !min-h-0 f-ui-01'}],defaultVariants:{//intent: 'primary',
|
|
965
979
|
isActive:false,iconSmall:false,size:'small',hasIcon:false}});const EdsLink=class{constructor(hostRef){registerInstance(this,hostRef);this.parentContext=null;// Accepts the entire event detail or null
|
|
966
|
-
this.label=undefined;this.intent=
|
|
980
|
+
this.label=undefined;this.intent='primary';this.icon=undefined;this.iconPos='right';this.iconSmall=false;this.size='small';this.external=false;this.current=false;this.download=false;this.url=undefined;this.ariaLabel=undefined;this.disabled=false;this.hideLabelOnSmallScreen=false;}handleParentContext(event){if(event.target!==this.el){// Ignore the event if it's not targeted at this specific instance
|
|
967
981
|
return;}this.parentContext=event.detail;event.stopPropagation();}handleClick(event){var _a,_b;if(this.disabled){// Prevent navigation if the link is disabled
|
|
968
982
|
event.preventDefault();return;}sendAnalytics({category:'ui-component',parentContext:this.parentContext,tag:this.el.tagName.toLowerCase(),name:((_a=this.label)===null||_a===void 0?void 0:_a.toLowerCase())||((_b=this.ariaLabel)===null||_b===void 0?void 0:_b.toLowerCase())||'',action:'click'});}handleKeyDown(event){if(this.disabled){return;}// Handle Enter and Space keys for activation
|
|
969
983
|
if(event.key==='Enter'||event.key===' '){event.preventDefault();this.handleClick(event);// For actual navigation, trigger the native link behavior
|
|
970
|
-
if(this.url&&!this.disabled){if(this.external){window.open(this.url,'_blank','noopener,noreferrer');}else {window.location.href=this.url;}}}}getLinkSize(){
|
|
984
|
+
if(this.url&&!this.disabled){if(this.external){window.open(this.url,'_blank','noopener,noreferrer');}else {window.location.href=this.url;}}}}getLinkSize(){return this.size;}renderLeftIcon(){if(this.icon&&this.iconPos==='left'){return h("span",{class:"flex"},h("eds-icon-wrapper",{"aria-hidden":"true",class:`
|
|
971
985
|
flex inline-flex items-center justify-center
|
|
972
986
|
${this.size==='large'?'h-24 w-24':'h-20 w-20'}
|
|
973
987
|
`,icon:this.icon}));}return null;}renderRightIcon(){if(this.icon&&this.iconPos==='right'){return h("span",{class:"flex"},h("eds-icon-wrapper",{"aria-hidden":"true",class:`
|
|
974
988
|
flex inline-flex items-center justify-center
|
|
975
989
|
${this.size==='large'?'h-24 w-24':'h-20 w-20'}
|
|
976
|
-
`,icon:this.icon}));}return null;}render(){const classes=linkStyles({intent:this.intent,size:this.getLinkSize(),iconSmall:this.iconSmall,isActive:this.current,hasIcon:!!this.icon});const isInteractive=!this.disabled;const isIconOnly=!this.label||this.hideLabelOnSmallScreen&&this.icon;const labelClasses=this.hideLabelOnSmallScreen?'hidden lg:flex'// Tailwind example: hidden on small screens, visible on larger
|
|
977
|
-
:'';return h("a",{key:'
|
|
990
|
+
`,icon:this.icon}));}return null;}render(){const classes=linkStyles({intent:this.intent,size:this.getLinkSize(),iconSmall:this.iconSmall,isActive:this.current,hasIcon:!!this.icon});const safeUrl=typeof this.url==='string'&&this.url.length?this.url:undefined;const isInteractive=!this.disabled;const isIconOnly=!this.label||this.hideLabelOnSmallScreen&&this.icon;const labelClasses=this.hideLabelOnSmallScreen?'hidden lg:flex'// Tailwind example: hidden on small screens, visible on larger
|
|
991
|
+
:'';return h("a",{key:'2d72b4f56aad829c674edc920d8b8b9f83a6c9c1',class:`${classes||''}`,href:isInteractive?safeUrl:undefined,target:this.external&&isInteractive?'_blank':undefined,rel:this.external&&isInteractive?'noopener noreferrer':undefined,tabIndex:isInteractive?0:-1,"aria-label":isIconOnly?this.ariaLabel||'Link':undefined,"aria-disabled":this.disabled?'true':undefined,"aria-current":this.current?'page':undefined,role:this.disabled?'link':undefined,download:this.download?'':undefined,onClick:event=>this.handleClick(event),onKeyDown:event=>this.handleKeyDown(event)},h("span",{key:'8a8d9d31456c414d2167db7520978aefd9d955dc',class:"z-1 relative inline-flex items-center justify-center"},this.renderLeftIcon(),this.label&&h("span",{key:'b26b2f5aafa647912ced4b747c8b1e1c7a508050',class:labelClasses},this.label),this.renderRightIcon()));}get el(){return getElement(this);}};EdsLink.style=EdsLinkStyle0;const edsLogoCss=".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{color:currentColor}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.h-full{height:100%}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}@media (min-width: 900px){.lg\\:w-\\[150px\\]{width:150px}}";const EdsLogoStyle0=edsLogoCss;const EdsLogo=class{constructor(hostRef){registerInstance(this,hostRef);this.href='/';this.orientation='horizontal';this.type=undefined;this.label='Home';}/**
|
|
978
992
|
* Handles the click event on the logo link.
|
|
979
993
|
* Emits a `matomoEvent` for analytics tracking with details about the interaction.
|
|
980
994
|
* - `category`: Component type (e.g., "ui-component").
|
|
@@ -988,7 +1002,7 @@ const validOrientation=logos[this.orientation];if(!validOrientation){//console.e
|
|
|
988
1002
|
return hLogoColor;// Default fallback logo
|
|
989
1003
|
}const validLogo=validOrientation[this.type];if(!validLogo){//console.error(`Invalid type "${this.type}" for orientation "${this.orientation}". Falling back to "color".`);
|
|
990
1004
|
return validOrientation['color'];// Fallback to color logo
|
|
991
|
-
}return validLogo;}render(){const logoContent=this.getLogo();return h("a",{key:'
|
|
1005
|
+
}return validLogo;}render(){const logoContent=this.getLogo();return h("a",{key:'341988e61c1b9f946bd4529f5562af8366704868',href:this.href,onClick:()=>this.handleClick(),class:"eds-logo-wrapper","aria-label":this.label},h("div",{key:'1a1e4516ba223b6132a85889626ca7856ca5a16c',innerHTML:logoContent}));}get el(){return getElement(this);}};EdsLogo.style=EdsLogoStyle0;const edsMatomoNoticeCss=".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.z-\\[999999\\]{z-index:999999}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";const EdsMatomoNoticeStyle0=edsMatomoNoticeCss;const EdsMatomoNotice=class{constructor(hostRef){registerInstance(this,hostRef);this.consent=createEvent(this,"consent",7);this.heading='Analytics Consent';this.description="We use anonymous analytics to improve our services. No data is collected unless you give your consent. If you don't wish to send data right now, you can always re-enable analytics later by clicking the Cookies Preference button in the footer. However, by opting in today, you're joining a community that shapes our product's future—all while keeping your data completely anonymous.";this.optOutMessage="You are already part of our community, and your anonymous data helps shape our product's future! Rest assured, your privacy is fully protected.";this.forceShow=false;this.showNotice=true;}/**
|
|
992
1006
|
* Listens for global custom events to open the matomo-consent.
|
|
993
1007
|
*/toggleCookiesConsent(){this.showNotice=!this.showNotice;}/**
|
|
994
1008
|
* Checks if the consent cookie exists.
|
|
@@ -1007,8 +1021,17 @@ const sessionDeferred=sessionStorage.getItem(this.getStorageKey());this.showNoti
|
|
|
1007
1021
|
sessionStorage.setItem(this.getStorageKey(), 'true');
|
|
1008
1022
|
this.hideNotice();
|
|
1009
1023
|
this.consent.emit('defer');
|
|
1010
|
-
}*/keepMeIn(){this.hideNotice();}hideNotice(){this.showNotice=false;}render(){if(!this.showNotice){return null;}return h("div",{class:"fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center"},h("eds-accordion",{title:this.heading,description:this.hasCookieConsent()?this.optOutMessage:this.description,switchBg:true,expanded:true},this.hasCookieConsent()?h("div",{class:"flex items-center gap-4"},this.optedOut()?h("eds-button",{intent:"primary",label:"Opt me in again","aria-label":"Opt me in again",onClick:()=>this.optInAnalytics()}):h("eds-button",{intent:"primary",label:"Keep Me In","aria-label":"Keep Me In",onClick:()=>this.keepMeIn()}),h("eds-button",{intent:"ghostInverse",label:"Opt-out","aria-label":"Opt-out from analytics",onClick:()=>this.optOutAnalytics()})):h("div",{class:"flex items-center gap-4"},h("eds-button",{intent:"primary",label:"I agree","aria-label":"Opt-in for analytics",onClick:()=>this.optInAnalytics()}),h("eds-button",{intent:"ghost",label:"No, thanks","aria-label":"Opt-out from analytics",onClick:()=>this.noThanks()}))));}get el(){return getElement(this);}};EdsMatomoNotice.style=EdsMatomoNoticeStyle0;const edsNpsCss=".flex{display:flex}.justify-between{justify-content:space-between}.mt-4{margin-top:0.25rem}.mt-8{margin-top:0.5rem}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.grid{display:grid}.grid-col-span-1{--container-grid-columns:1;grid-column:span 1 / span 1}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-11[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1)::before{inset-inline-start:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+11)::before{inset-inline-end:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)~*::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+11)::after{border-inline-end-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+11)::after{top:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)::after{bottom:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)~li::after{bottom:0}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}";const EdsNpsStyle0=edsNpsCss;const EdsNps=class{constructor(hostRef){registerInstance(this,hostRef);this.nps=createEvent(this,"nps",7);this.min=0;this.max=10;this.
|
|
1011
|
-
|
|
1024
|
+
}*/keepMeIn(){this.hideNotice();}hideNotice(){this.showNotice=false;}render(){if(!this.showNotice){return null;}return h("div",{class:"fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center"},h("eds-accordion",{title:this.heading,description:this.hasCookieConsent()?this.optOutMessage:this.description,switchBg:true,expanded:true},this.hasCookieConsent()?h("div",{class:"flex items-center gap-4"},this.optedOut()?h("eds-button",{intent:"primary",label:"Opt me in again","aria-label":"Opt me in again",onClick:()=>this.optInAnalytics()}):h("eds-button",{intent:"primary",label:"Keep Me In","aria-label":"Keep Me In",onClick:()=>this.keepMeIn()}),h("eds-button",{intent:"ghostInverse",label:"Opt-out","aria-label":"Opt-out from analytics",onClick:()=>this.optOutAnalytics()})):h("div",{class:"flex items-center gap-4"},h("eds-button",{intent:"primary",label:"I agree","aria-label":"Opt-in for analytics",onClick:()=>this.optInAnalytics()}),h("eds-button",{intent:"ghost",label:"No, thanks","aria-label":"Opt-out from analytics",onClick:()=>this.noThanks()}))));}get el(){return getElement(this);}};EdsMatomoNotice.style=EdsMatomoNoticeStyle0;const edsNpsCss=".flex{display:flex}.justify-between{justify-content:space-between}.mt-4{margin-top:0.25rem}.mt-8{margin-top:0.5rem}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.grid{display:grid}.grid-col-span-1{--container-grid-columns:1;grid-column:span 1 / span 1}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-11[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1)::before{inset-inline-start:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+11)::before{inset-inline-end:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)~*::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+11)::after{border-inline-end-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+11)::after{top:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)::after{bottom:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)~li::after{bottom:0}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}";const EdsNpsStyle0=edsNpsCss;const EdsNps=class{constructor(hostRef){registerInstance(this,hostRef);this.nps=createEvent(this,"nps",7);this.min=0;this.max=10;this.btnRefs=[];this.onSelect=value=>{this.selectedValue=value;this.nps.emit(value);// Move focus to the selected button (like your rating component)
|
|
1025
|
+
requestAnimationFrame(()=>{var _a,_b;const idx=value-this.min;(_b=(_a=this.btnRefs[idx])===null||_a===void 0?void 0:_a.focus)===null||_b===void 0?void 0:_b.call(_a);});};this.handleKeyNav=e=>{const{key}=e;const navigational=['ArrowRight','ArrowLeft','Home','End',' ','Enter'];if(!navigational.includes(key)){return;}e.preventDefault();const count=this.max-this.min+1;// Derive current index from selectedValue; if none, use 0 (first)
|
|
1026
|
+
let currentIdx=this.selectedValue==null?0:this.selectedValue-this.min;switch(key){case'ArrowRight':currentIdx=Math.min(count-1,currentIdx+1);this.setActiveByIndex(currentIdx,/*commit*/false);break;case'ArrowLeft':currentIdx=Math.max(0,currentIdx-1);this.setActiveByIndex(currentIdx,/*commit*/false);break;case'Home':this.setActiveByIndex(0,/*commit*/false);break;case'End':this.setActiveByIndex(count-1,/*commit*/false);break;case' ':case'Enter':// Commit current focused item
|
|
1027
|
+
this.onSelect(this.min+currentIdx);break;}};this.question=undefined;this.leftLabel=undefined;this.rightLabel=undefined;this.selectedValue=null;}/** Move visual highlight & roving tabindex; optionally commit selection */setActiveByIndex(index,commit=false){var _a;const value=this.min+index;// Update highlight so focus movement is visible (like your rating)
|
|
1028
|
+
this.selectedValue=value;// Focus the button host (ensure eds-button forwards focus to its inner <button>)
|
|
1029
|
+
const target=this.btnRefs[index];typeof(target===null||target===void 0?void 0:target.focusInner)==='function'?target.focusInner():(_a=target===null||target===void 0?void 0:target.focus)===null||_a===void 0?void 0:_a.call(target);if(commit){this.onSelect(value);}}render(){const count=this.max-this.min+1;return h("div",{key:'ca0a63dd6554e39b78fe1c607af0fede74c692c7',class:"eds-nps"},h("eds-input-label",{key:'bdf231836d8c6dbd46e852753696c4b7dad577c7',id:"nps-question",name:"nps-question",label:this.question}),h("div",{key:'004ad431ca02e57c7848a4c3fd0a4ecff40b6573',id:"nps-buttons",role:"radiogroup","aria-labelledby":"nps-question",class:"grid grid-cols-11",onKeyDown:this.handleKeyNav},Array.from({length:count},(_,i)=>{const val=this.min+i;const isSelected=val===this.selectedValue;// Roving tabindex: focusable is the selected; if none selected yet, first is focusable
|
|
1030
|
+
const tabIndex=isSelected||this.selectedValue==null&&i===0?0:-1;return h("div",{class:"grid-col-span-1",key:val},h("eds-button",{ref:el=>this.btnRefs[i]=el,role:"radio","aria-checked":isSelected?'true':'false',"aria-label":`${val}`,// Use onClick so keyboard activation on inner <button> works natively
|
|
1031
|
+
onClick:()=>this.onSelect(val),tabIndex:tabIndex,intent:isSelected?'primary':'ghost',"extra-class":"!block !px-0 w-full",label:`${val}`,// Optional: keep highlight in sync when tabbing into the group
|
|
1032
|
+
onFocus:()=>{// Only move highlight on initial focus or when roving; remove if you
|
|
1033
|
+
// want focus without highlight.
|
|
1034
|
+
this.selectedValue=val;}}));})),h("div",{key:'ffd498e00559a76b44e8d98ed060db86e60fbde7',class:"flex justify-between mt-8"},h("span",{key:'80065344c34d88ce3f01aac28d2b87ded60ec524',class:"f-ui-04 text-light ml-4"},this.leftLabel),h("span",{key:'2a67b416e4e7b0bf61aa66cb4546192860bd372f',class:"f-ui-04 text-light mr-4"},this.rightLabel)));}get el(){return getElement(this);}};EdsNps.style=EdsNpsStyle0;const edsPaginationCss="ul,menu{list-style:none;margin:0;padding:0}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-light{color:var(--grey-700)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";const EdsPaginationStyle0=edsPaginationCss;const EdsPagination=class{constructor(hostRef){registerInstance(this,hostRef);/**
|
|
1012
1035
|
* Handles keyboard navigation within the pagination
|
|
1013
1036
|
*/this.handleKeyDown=e=>{if(this.mode!=='default'||!this.useButtons){return;}const navigableItems=this.getNavigableItems();if(e.key==='ArrowRight'||e.key==='ArrowLeft'){e.preventDefault();const increment=e.key==='ArrowRight'?1:-1;let currentIndex=this.focusedIndex;// If no item is focused, start from current page or first item
|
|
1014
1037
|
if(currentIndex===-1){const currentPageIndex=navigableItems.findIndex(item=>item.type==='page'&&item.page===this.currentPage);currentIndex=currentPageIndex!==-1?currentPageIndex:0;}let newIndex=currentIndex+increment;// Wrap around navigation
|
|
@@ -1059,7 +1082,7 @@ range.push(total);}return range;}/**
|
|
|
1059
1082
|
*/handlePageClick(event,newPage){if(this.mode==='navigator'){return;// No page clicking logic for navigator mode
|
|
1060
1083
|
}if(this.useButtons){event.preventDefault();// Prevent default for buttons
|
|
1061
1084
|
}if(newPage!==this.currentPage){this.links=this.links.map(link=>typeof link==='object'?Object.assign(Object.assign({},link),{current:parseInt(link.label)===newPage}):link);const pageChangeEvent=new CustomEvent('page',{detail:{value:newPage},bubbles:true,composed:true});this.hostEl.dispatchEvent(pageChangeEvent);this.currentPage=newPage;}}render(){const navigableIndex=-1;// Track index for keyboard navigation
|
|
1062
|
-
return h("div",{key:'
|
|
1085
|
+
return h("div",{key:'3ca147814cf1e0003bac73502a0ae2bf96412ce2'},this.total>0&&this.mode==='default'&&h("p",{key:'85e3fe3224888a4fc9029e91c53c5a753506af55',class:"f-ui-03 text-light mb-28 w-full text-center","aria-live":"polite",id:"pagination-info"},h("span",{key:'9edeecb5ae0a1c74dcbf11829a4079cdbbfd46e4',class:"text-light sr-only"},"Results:"),this.pageResults()),this.mode==='navigator'||this.lastPage&&this.lastPage>1?h("nav",{"aria-label":"Pagination Navigation","aria-describedby":this.mode==='default'?'pagination-info':undefined,onKeyDown:this.handleKeyDown},h("ul",{class:"flex items-center justify-center gap-x-8",role:"list"},h("li",{class:"mr-auto"},this.useButtons?h("div",{class:"pagination-button-wrapper",onFocus:()=>this.handleItemFocus(navigableIndex)},h("eds-button",{label:this.prevLabel,disabled:this.mode==='navigator'?!this.prevUrl:this.isFirstPage(),"aria-label":"Go to previous page",icon:"chevron-left","icon-pos":"left",size:"small","icon-small":"true",intent:"ghost","extra-class":"!p-8 lg:!pr-12 pagination-button",onClick:event=>{if(this.mode==='default'&&!this.isFirstPage()){this.handlePageClick(event,(this.currentPage||1)-1);}}})):h("eds-link",{label:this.prevLabel,url:this.mode==='navigator'?this.prevUrl||'#':this.isFirstPage()?'#':this.generateLink(this.currentPage-1).url,disabled:this.mode==='navigator'?!this.prevUrl:this.isFirstPage(),"aria-label":"Go to previous page",icon:"chevron-left","icon-pos":"left",size:"small","icon-small":"true",intent:"strong","hide-label-on-small-screen":true,class:"!p-8 lg:!pr-12"})),this.mode==='default'&&this.links.map((link,index)=>h("li",{key:index,class:"f-ui-02 flex h-36 items-center justify-center"},typeof link==='string'?h("span",{class:"flex items-center justify-center","aria-hidden":"true"},link):this.useButtons?h("div",{class:"pagination-button-wrapper",onFocus:()=>this.handleItemFocus(navigableIndex)},h("eds-button",{label:link.label,"aria-label":link.current?`Current page, page ${link.label}`:`Go to page ${link.label}`,"aria-current":link.current?'page':undefined,size:"small","extra-class":"!p-8 pagination-button",intent:link.current?'secondary':'ghost',onClick:event=>this.handlePageClick(event,parseInt(link.label))})):h("eds-link",{url:link.url,"aria-label":link.ariaLabel,label:link.label,current:link.current,"aria-current":link.current?'page':undefined,size:"small",class:"!p-8",intent:link.current?'secondary':'ghost',onClick:event=>this.handlePageClick(event,parseInt(link.label))}))),h("li",{class:"ml-auto"},this.useButtons?h("div",{class:"pagination-button-wrapper",onFocus:()=>this.handleItemFocus(navigableIndex)},h("eds-button",{label:this.nextLabel,disabled:this.mode==='navigator'?!this.nextUrl:this.isLastPage(),"aria-label":"Go to next page",size:"small","icon-small":"true",icon:"chevron-right",intent:"ghost","extra-class":"!p-8 lg:!pl-12 pagination-button",onClick:event=>{if(this.mode==='default'&&!this.isLastPage()){this.handlePageClick(event,(this.currentPage||1)+1);}}})):h("eds-link",{label:this.nextLabel,url:this.mode==='navigator'?this.nextUrl||'#':this.isLastPage()?'#':this.generateLink(this.currentPage+1).url,disabled:this.mode==='navigator'?!this.nextUrl:this.isLastPage(),"aria-label":"Go to next page",size:"small","icon-small":"true",icon:"chevron-right",intent:"strong","hide-label-on-small-screen":true,class:"!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors"})))):null);}get hostEl(){return getElement(this);}static get watchers(){return {"currentPage":["onPageOrLastPageChange"],"lastPage":["onPageOrLastPageChange"]};}};EdsPagination.style=EdsPaginationStyle0;const edsRatingCss=":host{display:inline-block}.block{display:block}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.0625rem * var(--tw-space-x-reverse));margin-left:calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)))}";const EdsRatingStyle0=edsRatingCss;const EdsRating=class{constructor(hostRef){registerInstance(this,hostRef);this.rating=createEvent(this,"rating",7);this.buttonRefs=[];this.ratingType='star';this.ratingCount=5;this.selectedRating=0;}/**
|
|
1063
1086
|
* Lifecycle method that runs when the component has fully loaded.
|
|
1064
1087
|
* It emits a custom event for each `eds-button` element contained within the breadcrumb.
|
|
1065
1088
|
*/componentDidLoad(){const btns=this.el.shadowRoot.querySelectorAll('eds-button');btns.forEach(btn=>{this.emitContext(btn);});}/**
|
|
@@ -1070,42 +1093,72 @@ return h("div",{key:'bf34cb68555555ef984592b261929cfb5ef93048'},this.total>0&&th
|
|
|
1070
1093
|
*/emitContext(btnElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:this.selectedRating}});btnElement.dispatchEvent(event);}/**
|
|
1071
1094
|
* Handles the click event on a star.
|
|
1072
1095
|
* @param rating - The selected rating value.
|
|
1073
|
-
*/onSelect(rating){this.selectedRating=rating;this.rating.emit(rating);setTimeout(()=>{const btn=this.buttonRefs[rating-1];btn===null||btn===void 0?void 0:btn.focus();},0);}handleKeyNav(e){const{key}=e;if(!['ArrowRight','ArrowLeft','ArrowDown','ArrowUp'].includes(key)){return;}e.preventDefault();const increment=key==='ArrowRight'||key==='ArrowDown'?1:-1;let next=(this.selectedRating||1)+increment;if(next>this.ratingCount){next=1;}if(next<1){next=this.ratingCount;}this.onSelect(next);}render(){return h("div",{key:'
|
|
1096
|
+
*/onSelect(rating){this.selectedRating=rating;this.rating.emit(rating);setTimeout(()=>{const btn=this.buttonRefs[rating-1];btn===null||btn===void 0?void 0:btn.focus();},0);}handleKeyNav(e){const{key}=e;if(!['ArrowRight','ArrowLeft','ArrowDown','ArrowUp'].includes(key)){return;}e.preventDefault();const increment=key==='ArrowRight'||key==='ArrowDown'?1:-1;let next=(this.selectedRating||1)+increment;if(next>this.ratingCount){next=1;}if(next<1){next=this.ratingCount;}this.onSelect(next);}render(){return h("div",{key:'52cc87859b174e2eb89392c083031ffde587fb7d',id:"rating-buttons",role:"group","aria-labelledby":"rating",class:"stars flex space-x-1 my-8",onKeyDown:e=>this.handleKeyNav(e)},Array.from({length:this.ratingCount},(_,index)=>{const starRating=index+1;const isSelected=starRating<=this.selectedRating;// Use the mapping text if available; otherwise, fall back to a generic label.
|
|
1074
1097
|
const checked=this.selectedRating===starRating;return h("eds-button",{ref:el=>this.buttonRefs[index]=el,icon:this.ratingType,"aria-label":`${starRating} ${this.ratingType}${starRating>1?'s':''}`,onClick:()=>this.onSelect(starRating),tabIndex:checked||this.selectedRating===0&&index===0?0:-1,intent:isSelected?'primary':'ghost',size:"large","extra-class":"p-2"// Optional padding or styling for the star button
|
|
1075
|
-
});}));}get el(){return getElement(this);}};EdsRating.style=EdsRatingStyle0;const
|
|
1098
|
+
});}));}get el(){return getElement(this);}};EdsRating.style=EdsRatingStyle0;const edsSidebarCss=":host{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;transition:width 0.3s ease}:host(.collapsed){width:4rem}:host::-webkit-scrollbar{width:8px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2);border-radius:4px}:host::-webkit-scrollbar-thumb:hover{background:rgba(0, 0, 0, 0.3)}.sidebar-nav{padding:0.5rem 0}.sidebar-header{display:flex;justify-content:flex-end;padding:0.5rem 0.75rem;margin-bottom:0.5rem}:host(.collapsed) .sidebar-header{justify-content:center;padding:0.5rem}.collapse-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:none;border:none;cursor:pointer;padding:0;border-radius:0.375rem;transition:background-color 0.15s ease;color:inherit}.collapse-toggle:hover{background-color:rgba(0, 0, 0, 0.08)}.collapse-toggle:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:2px}.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.125rem}.sidebar-item{display:flex;flex-direction:column}.sidebar-item-content{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;cursor:pointer;user-select:none;word-break:break-word;transition:background-color 0.15s ease;border-radius:0.375rem;margin:0 0.5rem;position:relative}:host(.collapsed) .sidebar-item-content{justify-content:center;padding:0.75rem;margin:0 0.5rem}.sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}.sidebar-item-content:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:-2px;z-index:1}.sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.sidebar-content-wrapper{display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0}.sidebar-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;margin:-0.125rem 0;pointer-events:none}.sidebar-link-wrapper{flex:1;min-width:0;pointer-events:none}.sidebar-link{font-weight:400;pointer-events:none}.sidebar-children{list-style:none;margin:0.25rem 0 0 0;padding:0;display:flex;flex-direction:column;gap:0.125rem;overflow:hidden;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-0.25rem)}to{opacity:1;transform:translateY(0)}}.sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.collapsed) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}.sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}.sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}.sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}.sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}.sidebar-item.level-5 .sidebar-item-content{padding-left:7rem}:host(.theme-default) .sidebar-item-content{border-radius:0.375rem;margin:0 0.5rem;padding:0.5rem 0.75rem}:host(.theme-default.collapsed) .sidebar-item-content{margin:0 0.5rem;border-radius:0.375rem}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:transparent}:host(.theme-default) .sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:600}:host(.theme-default) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.theme-default) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-default) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-default) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-default) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-item-content{border-radius:0;margin:0;padding-left:1rem;padding-right:1rem}:host(.theme-minimal.collapsed) .sidebar-item-content{margin:0 0.25rem;border-radius:0.375rem}:host(.theme-minimal) .sidebar-item-content:hover{background-color:var(--grey-300)}:host(.theme-minimal) .sidebar-item.active>.sidebar-item-content{background-color:var(--grey-400);border-left:3px solid var(--grey-900);padding-left:calc(1rem - 3px)}:host(.theme-minimal.collapsed) .sidebar-item.active>.sidebar-item-content{border-left:none;border-radius:0.375rem;padding-left:0.75rem}:host(.theme-minimal) .sidebar-item.level-1.active>.sidebar-item-content{padding-left:calc(2rem - 3px)}:host(.theme-minimal) .sidebar-item.level-2.active>.sidebar-item-content{padding-left:calc(3.25rem - 3px)}:host(.theme-minimal) .sidebar-item.level-3.active>.sidebar-item-content{padding-left:calc(4.5rem - 3px)}:host(.theme-minimal) .sidebar-item.level-4.active>.sidebar-item-content{padding-left:calc(5.75rem - 3px)}:host(.theme-minimal) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-minimal) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-minimal) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-minimal) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-minimal) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-children{position:relative}:host(.theme-ebrains) .sidebar-item-content{padding:0.5rem 1rem;border-radius:0.5rem;margin:0 0.5rem}:host(.theme-ebrains.collapsed) .sidebar-item-content{padding:0.75rem}:host(.theme-ebrains) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.05)}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content{background-color:var(--green-600, #22c55e);color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-link{--eds-link-color:white;--eds-link-hover-color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-toggle{color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-icon{color:white}:host(.theme-ebrains) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-ebrains) .sidebar-item.level-1 .sidebar-item-content{padding-left:2.25rem}:host(.theme-ebrains) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.5rem}:host(.theme-ebrains) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.75rem}:host(.theme-ebrains) .sidebar-item.level-4 .sidebar-item-content{padding-left:6rem}@media (prefers-color-scheme: dark){.collapse-toggle:hover{background-color:rgba(255, 255, 255, 0.08)}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.05)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 102, 204, 0.15)}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.06)}:host::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}:host::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.3)}}.sidebar-toggle eds-icon-wrapper,.sidebar-icon eds-icon-wrapper,.collapse-toggle eds-icon-wrapper{transition:transform 0.15s ease;display:flex;align-items:center;justify-content:center}.sidebar-item-content:focus-visible .sidebar-link{text-decoration:underline}.sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:500}:host(.collapsed) .sidebar-item-content::after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0.5rem;padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.9);color:white;border-radius:0.375rem;white-space:nowrap;font-size:0.875rem;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:1000}:host(.collapsed) .sidebar-item-content:hover::after{opacity:1;transition-delay:0.3s}.-ml-4{margin-left:-0.25rem}.mt-2{margin-top:0.125rem}";const EdsSidebarStyle0=edsSidebarCss;const EdsSidebar=class{constructor(hostRef){registerInstance(this,hostRef);this.sidebar=createEvent(this,"sidebar",7);this.toggleItem=(itemId,ev)=>{if(ev){ev.stopPropagation();}const newOpen=new Set(this.openItems);if(newOpen.has(itemId)){newOpen.delete(itemId);}else {newOpen.add(itemId);}this.openItems=newOpen;};this.navigate=(url,ev)=>{if(!this.enableRouting||!url){return;}if(ev){ev.preventDefault();ev.stopPropagation();}// Emit custom event for routing
|
|
1099
|
+
this.sidebar.emit(url);// Update browser history if available
|
|
1100
|
+
if(typeof window!=='undefined'&&window.history){window.history.pushState({},'',url);}};this.handleItemClick=(item,ev)=>{var _a;// If item has children, ONLY toggle (don't navigate)
|
|
1101
|
+
if((_a=item.children)===null||_a===void 0?void 0:_a.length){this.toggleItem(item.id,ev);return;}// Only navigate if no children and has URL
|
|
1102
|
+
if(item.url){this.navigate(item.url,ev);}};this.items='[]';this.theme='default';this.activeUrl='';this.enableRouting=true;this.maxLevel=4;this.openItems=new Set();this.parsedItems=[];}// ---------------------------------------------------------------------------
|
|
1103
|
+
// Lifecycle
|
|
1104
|
+
// ---------------------------------------------------------------------------
|
|
1105
|
+
componentWillLoad(){this.parsedItems=this.parseItems(this.items);this.initializeOpenItems(this.parsedItems);}// ---------------------------------------------------------------------------
|
|
1106
|
+
// Watchers
|
|
1107
|
+
// ---------------------------------------------------------------------------
|
|
1108
|
+
handleItemsChange(newItems){this.parsedItems=this.parseItems(newItems);this.initializeOpenItems(this.parsedItems);}handleActiveUrlChange(){this.initializeOpenItems(this.parsedItems);}// ---------------------------------------------------------------------------
|
|
1109
|
+
// Utils
|
|
1110
|
+
// ---------------------------------------------------------------------------
|
|
1111
|
+
parseItems(items){if(Array.isArray(items)){return items;}if(typeof items==='string'){if(!items||items.trim()===''){return [];}try{const parsed=JSON.parse(items);return Array.isArray(parsed)?parsed:[];}catch(e){console.error('eds-sidebar: Failed to parse items JSON:',e);console.error('Received string:',items);return [];}}return [];}initializeOpenItems(items,level=0){if(level===0){// reset before recomputing
|
|
1112
|
+
this.openItems=new Set();}if(level>=this.maxLevel){return;}items.forEach(item=>{var _a;const isActive=this.activeUrl&&item.url===this.activeUrl;const hasActiveChild=this.hasActiveDescendant(item);if(item.open||isActive||hasActiveChild){this.openItems.add(item.id);}if((_a=item.children)===null||_a===void 0?void 0:_a.length){this.initializeOpenItems(item.children,level+1);}});}hasActiveDescendant(item){var _a;if(item.url===this.activeUrl){return true;}if(!((_a=item.children)===null||_a===void 0?void 0:_a.length)){return false;}return item.children.some(child=>this.hasActiveDescendant(child));}// ---------------------------------------------------------------------------
|
|
1113
|
+
// Render
|
|
1114
|
+
// ---------------------------------------------------------------------------
|
|
1115
|
+
renderItem(item,level=0){if(level>=this.maxLevel){return null;}const isOpen=this.openItems.has(item.id);const isActive=!!item.url&&this.activeUrl===item.url;const hasChildren=!!(item.children&&item.children.length);const itemId=`eds-sidebar-${item.id}`;const childrenId=`${itemId}-children`;return h("li",{class:{'sidebar-item':true,open:isOpen,active:isActive,'has-children':hasChildren,[`level-${level}`]:true}},h("div",{class:"sidebar-item-content",onClick:e=>this.handleItemClick(item,e),role:hasChildren?'button':item.url?'link':'button',tabindex:"0","aria-current":isActive?'page':undefined,"aria-expanded":hasChildren?isOpen?'true':'false':undefined,"aria-controls":hasChildren?childrenId:undefined,onKeyDown:e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();this.handleItemClick(item,e);}}},hasChildren&&h("span",{class:"sidebar-toggle mt-2 -ml-4","aria-hidden":"true"},h("eds-icon-wrapper",{icon:isOpen?'chevron-down':'chevron-right'})),h("span",{class:"sidebar-link-wrapper"},h("eds-link",{label:item.title,url:item.url||'#',intent:isActive?'strong':'weak',size:"small","aria-label":item.title,"extra-class":"sidebar-link",tabindex:"-1"}))),hasChildren&&isOpen&&h("ul",{id:childrenId,class:"sidebar-children"},item.children.map(child=>this.renderItem(child,level+1))));}render(){return h(Host,{key:'4334d20e5d72671243633253910ab05b4da013da',class:{'eds-sidebar':true,[`theme-${this.theme}`]:true}},h("nav",{key:'319f6f42416d4229f1b011bf1216b39c8627302d',class:"sidebar-nav","aria-label":"Sidebar"},h("ul",{key:'687ceae3eca3e844e8f6a361db4a76d127d27813',class:"sidebar-list"},this.parsedItems.map(item=>this.renderItem(item,0)))));}get el(){return getElement(this);}static get watchers(){return {"items":["handleItemsChange"],"activeUrl":["handleActiveUrlChange"]};}};EdsSidebar.style=EdsSidebarStyle0;const edsSpinnerCss=":host{display:block}.spinner{box-sizing:border-box;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}";const EdsSpinnerStyle0=edsSpinnerCss;const EdsSpinner=class{constructor(hostRef){registerInstance(this,hostRef);this.size='md';this.variant='secondary';this.message=undefined;this.background='var(--grey-200)';this.fullscreen=false;}get spinnerSize(){switch(this.size){case'xs':return '1rem';case'sm':return '4rem';case'lg':return '8rem';case'xl':return '10rem';case'md':default:return '6rem';}}get spinnerThickness(){switch(this.size){case'xs':return '4px';case'sm':return '8px';case'lg':return '16px';case'xl':return '20px';case'md':default:return '12px';}}render(){// derive colors from variant
|
|
1076
1116
|
const borderColor=this.variant==='primary'?'var(--grey-900)':'var(--grey-400)';const bottomColor=this.variant==='primary'?'var(--green-400)':'var(--grey-900)';const spinnerStyle=Object.assign({width:this.spinnerSize,height:this.spinnerSize,border:`${this.spinnerThickness} solid ${borderColor}`,borderBottomColor:bottomColor},!this.fullscreen&&{display:'inline-block'});// Overlay style: use fixed positioning for fullscreen,
|
|
1077
1117
|
// and absolute positioning for inline mode.
|
|
1078
1118
|
const overlayStyle=this.fullscreen?{position:'fixed',top:'0',left:'0',width:'100vw',height:'100vh',zIndex:'9999999',backgroundColor:this.background,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'}:{position:'absolute',top:'0',left:'0',width:'100%',height:'100%',//zIndex: '1000',
|
|
1079
|
-
backgroundColor:this.background,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'};return h(Host,{key:'
|
|
1080
|
-
if(
|
|
1081
|
-
|
|
1082
|
-
//
|
|
1083
|
-
this.activeStep=index;this.step.emit(this.activeStep);};this.handleNext=()=>{const lastIndex=this.parsedSteps.length-1
|
|
1084
|
-
this.activeStep
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
if(
|
|
1091
|
-
|
|
1092
|
-
this.activeStep=index;
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1119
|
+
backgroundColor:this.background,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'};return h(Host,{key:'c50ca410eb23855b3076babb78b4849246722cf7'},h("div",{key:'9b3722b00777a0dd77288c4c3b29419a9b87640b',class:"spinner-overlay",style:overlayStyle},h("span",{key:'5479d0195b6d8991613df8ae03eee34b2a095b6b',class:"spinner",style:spinnerStyle}),this.message&&h("p",{key:'448c3b0e6ce0aac6c21b53c58b97e423a1739864',class:"f-body-01"},this.message)));}};EdsSpinner.style=EdsSpinnerStyle0;const edsStepsCss="blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-39px;top:-2px;display:flex;align-items:center;justify-content:center;width:31px;height:31px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.text-center{text-align:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.mb-16{margin-bottom:1rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0}.horizontal-step{display:flex;flex-direction:column;align-items:center;gap:0.5rem;cursor:pointer;flex:1;position:relative}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.25rem;left:50%;width:100%;height:2px;background-color:#e0e0e0;z-index:-1}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--green-500);}.step-indicator{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease}.horizontal-step.is-active .step-indicator{border-color:var(--green-500);background-color:var(--green-500);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--green-500);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-weight:600;font-size:0.875rem}.step-label{font-size:0.875rem;text-align:center;font-weight:500}.horizontal-step.is-active .step-label{color:var(--green-500)}.step-content{padding:2rem 0;margin-left:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);margin-right:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem)}.opacity-50{opacity:0.5}.eds-steps__title[role=\"button\"]{cursor:pointer}";const EdsStepsStyle0=edsStepsCss;const EdsSteps=class{constructor(hostRef){registerInstance(this,hostRef);this.step=createEvent(this,"step",7);this.finished=createEvent(this,"finished",7);this.next=createEvent(this,"next",7);this.back=createEvent(this,"back",7);this.handleTitleClick=index=>{// In linear mode, do NOT collapse; only navigate if allowed.
|
|
1120
|
+
if(this.type==='linear'){// prevent jumping forward over disabled steps
|
|
1121
|
+
if(index>this.activeStep){for(let i=this.activeStep;i<index;i++){if(this.isStepDisabled(i)){return;}}}this.activeStep=index;this.step.emit(this.activeStep);return;}// Non-linear vertical mode: support optional collapse/expand on current title
|
|
1122
|
+
if(this.orientation==='vertical'&&index===this.activeStep&&this.collapsibleTitles){this.activeStep=this.activeStep===index?-1:index;this.step.emit(this.activeStep);return;}// Otherwise, just set
|
|
1123
|
+
this.activeStep=index;this.step.emit(this.activeStep);};this.handleNext=()=>{const lastIndex=this.parsedSteps.length-1;// On last step
|
|
1124
|
+
if(this.activeStep>=lastIndex){this.finished.emit();this.activeStep=-1;// collapse the content
|
|
1125
|
+
this.step.emit(this.activeStep);// notify change (-1 sentinel)
|
|
1126
|
+
return;}const target=this.activeStep+1;this.next.emit(target);if(this.isStepDisabled(this.activeStep)){return;}this.activeStep=target;this.step.emit(this.activeStep);if(!Array.isArray(this.disableNext)){this.disableNext=false;}};this.handleBack=()=>{const lastIndex=this.parsedSteps.length-1;// If somehow collapsed, recover to last visible step first
|
|
1127
|
+
if(this.activeStep<0){this.activeStep=lastIndex;this.step.emit(this.activeStep);return;}if(this.activeStep>0){const target=this.activeStep-1;this.back.emit(target);this.activeStep=target;this.step.emit(this.activeStep);if(!Array.isArray(this.disableNext)){this.disableNext=false;}}};this.steps=[];this.type='static';this.orientation='vertical';this.nextLabel='Next';this.backLabel='Back';this.finishLabel='Finish';this.disableNext=false;this.headingLevel='h4';this.collapsibleTitles=false;this.activeStep=0;}handleDisableNextChange(newValue){if(typeof newValue==='string'&&newValue.trim().startsWith('[')){try{this.disableNext=JSON.parse(newValue);}catch(e){console.error('Failed to parse disable-next array:',e);}}}componentWillLoad(){this.handleDisableNextChange(this.disableNext);}componentDidLoad(){if(this.type==='linear'){const root=this.el.shadowRoot||this.el;const btns=root.querySelectorAll('eds-button');btns===null||btns===void 0?void 0:btns.forEach(btn=>this.emitContext(btn));}}activeStepChanged(newValue){// Clamp to valid range or collapsed sentinel
|
|
1128
|
+
const max=Math.max(0,this.parsedSteps.length-1);if(newValue>max){this.activeStep=max;return;}if(newValue<-1){this.activeStep=-1;return;}// If collapsed (only possible in non-linear mode), do not emit context
|
|
1129
|
+
if(newValue<0){return;}setTimeout(()=>{const root=this.el.shadowRoot||this.el;const all=root.querySelectorAll('.step');const active=all&&newValue<all.length?all[newValue]:undefined;active===null||active===void 0?void 0:active.querySelectorAll('eds-button').forEach(btn=>this.emitContext(btn));},50);}emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:this.activeStep},bubbles:true,composed:true});linkElement.dispatchEvent(event);}get parsedSteps(){return parseData(this.steps);}isStepDisabled(index){if(Array.isArray(this.disableNext)){return index<this.disableNext.length?!!this.disableNext[index]:false;}return index===this.activeStep&&!!this.disableNext;}isNextDisabledFor(index){return this.isStepDisabled(index);}/** Render the semantic heading element as a clickable control only in linear mode */renderHeading(title,index){const Tag=this.headingLevel;const isOpen=this.activeStep===index;if(this.type==='linear'){let forwardBlocked=false;if(index>this.activeStep){for(let i=this.activeStep;i<index;i++){if(this.isStepDisabled(i)){forwardBlocked=true;break;}}}const onKey=e=>{if(forwardBlocked){return;}if(e.key==='Enter'||e.key===' '){e.preventDefault();this.handleTitleClick(index);}};return h(Tag,{class:`eds-steps__title ${forwardBlocked?'is-disabled':''}`,role:"button",tabindex:forwardBlocked?-1:0,"aria-disabled":forwardBlocked?'true':'false',"aria-expanded":isOpen,"aria-controls":`eds-step-panel-${index}`,onClick:()=>!forwardBlocked&&this.handleTitleClick(index),onKeyDown:onKey},title);}return h(Tag,{class:`eds-steps__title ${this.collapsibleTitles&&index!==this.activeStep?'':''}`,onClick:()=>this.handleTitleClick(index)},title);}/** Render horizontal step indicator */renderHorizontalIndicator(step,index){const isActive=this.activeStep===index;const isCompleted=this.activeStep>index;let forwardBlocked=false;if(index>this.activeStep){for(let i=this.activeStep;i<index;i++){if(this.isStepDisabled(i)){forwardBlocked=true;break;}}}const onKey=e=>{if(forwardBlocked){return;}if(e.key==='Enter'||e.key===' '){e.preventDefault();this.handleTitleClick(index);}};return h("div",{class:`horizontal-step ${isActive?'is-active':''} ${isCompleted?'is-completed':''}`,onClick:()=>!forwardBlocked&&this.handleTitleClick(index),onKeyDown:onKey,role:"button",tabindex:forwardBlocked?-1:0,"aria-label":`Step ${index+1}: ${step.title}`,"aria-current":isActive?'step':undefined,"aria-disabled":forwardBlocked?'true':'false'},h("div",{class:"step-indicator"},h("span",{class:"step-number"},index+1)),h("span",{class:`text-center text-default f-ui-03 ${forwardBlocked?'opacity-50':''}`},step.title));}render(){const steps=this.parsedSteps;// Horizontal Linear
|
|
1130
|
+
if(this.type==='linear'&&this.orientation==='horizontal'){return h("div",{class:"steps--horizontal",style:{'--step-count':steps.length.toString()}},h("div",{class:"horizontal-indicators"},steps.map((step,index)=>this.renderHorizontalIndicator(step,index))),steps.map((step,index)=>{const isLast=index===steps.length-1;if(this.activeStep!==index){return null;}const marginClass=this.orientation==='horizontal'?'mt-64':'mt-32';return h("div",{class:"step-content",key:index,id:`eds-step-panel-${index}`},h("slot",{name:`step-${index}`},h("div",{class:"f-body-02 text-lighter",innerHTML:step.content})),h("div",{class:`flex items-center justify-between ${marginClass}`},h("eds-button",{label:this.backLabel,intent:"ghost",icon:"chevron-left",iconPos:"left",iconSmall:true,onClick:this.handleBack,disabled:index===0,class:index===0?'hidden':'block',size:"small"}),h("eds-button",{label:isLast?this.finishLabel:this.nextLabel,intent:"primary",icon:"chevron-right",iconSmall:true,onClick:this.handleNext,disabled:this.isNextDisabledFor(index),size:"small",class:index>0?'ml-8':null})),h("slot",{name:`actions-${index}`}));}));}// Vertical Linear
|
|
1131
|
+
if(this.type==='linear'){return h("div",{class:"steps"},steps.map((step,index)=>{const isLast=index===steps.length-1;const marginClass=this.orientation==='horizontal'?'mt-64':'mt-32';return h("div",{class:"step mb-16",key:index},this.renderHeading(step.title,index),this.activeStep===index&&h("div",{class:"content grid gap-y-16",id:`eds-step-panel-${index}`},h("slot",{name:`step-${index}`},h("div",{class:"my-16 f-body-02 text-lighter",innerHTML:step.content})),h("div",{class:`flex items-center justify-between ${marginClass}`},h("eds-button",{label:this.backLabel,intent:"ghost",icon:"chevron-left",iconPos:"left",iconSmall:true,onClick:this.handleBack,disabled:index===0,class:index===0?'hidden':'block',size:"small"}),h("eds-button",{label:isLast?this.finishLabel:this.nextLabel,intent:"primary",icon:"chevron-right",iconSmall:true,onClick:this.handleNext,disabled:this.isNextDisabledFor(index),size:"small",class:index>0?'ml-8':null})),h("slot",{name:`actions-${index}`})));}));}// Static
|
|
1132
|
+
return h("div",{class:"steps"},steps.map((step,index)=>h("div",{class:"step mb-16",key:index},this.renderHeading(step.title,index),h("div",{class:"content",id:`eds-step-panel-${index}`},h("slot",{name:`step-${index}`},h("div",{class:"f-body-02 text-lighter my-16",innerHTML:step.content}))))));}get el(){return getElement(this);}static get watchers(){return {"disableNext":["handleDisableNextChange"],"activeStep":["activeStepChanged"]};}};EdsSteps.style=EdsStepsStyle0;const edsStepsV2Css="blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-41px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.text-center{text-align:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0}.horizontal-step{display:flex;flex-direction:column;align-items:center;gap:0.5rem;cursor:pointer;flex:1;position:relative}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.25rem;left:50%;width:100%;height:2px;background-color:#e0e0e0;z-index:-1}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--green-500);}.step-indicator{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease;z-index:2}.horizontal-step.is-active .step-indicator{border-color:var(--green-500);background-color:var(--green-500);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--green-500);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-weight:600;font-size:0.875rem}.step-label{font-size:0.875rem;text-align:center;font-weight:500}.horizontal-step.is-active .step-label{color:var(--green-500)}.step-content{padding:2rem 0;margin-left:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);margin-right:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem)}.opacity-50{opacity:0.5}";const EdsStepsV2Style0=edsStepsV2Css;const EdsStepsV2=class{constructor(hostRef){registerInstance(this,hostRef);this.step=createEvent(this,"step",7);this.finished=createEvent(this,"finished",7);this.next=createEvent(this,"next",7);this.back=createEvent(this,"back",7);this.handleTitleClick=index=>{// In linear mode, do NOT collapse; only navigate if allowed.
|
|
1133
|
+
if(this.type==='linear'){if(index>this.activeStep){// Prevent jumping forward over disabled steps
|
|
1134
|
+
for(let i=this.activeStep;i<index;i++){if(this.isStepDisabled(i)){return;}}}this.activeStep=index;this.step.emit(this.activeStep);return;}// Non-linear vertical mode can toggle collapse of the current title
|
|
1135
|
+
if(this.orientation==='vertical'&&index===this.activeStep){this.activeStep=this.activeStep===index?-1:index;this.step.emit(this.activeStep);return;}// Otherwise just set
|
|
1136
|
+
this.activeStep=index;this.step.emit(this.activeStep);};this.handleNext=()=>{const lastIndex=this.parsedSteps.length-1;// On last step: do NOT collapse; keep content visible, just emit finished
|
|
1137
|
+
if(this.activeStep>=lastIndex){this.finished.emit();this.activeStep=-1;// collapse the content
|
|
1138
|
+
this.step.emit(this.activeStep);// notify change (-1 sentinel)
|
|
1139
|
+
return;}const target=this.activeStep+1;this.next.emit(target);if(this.isStepDisabled(this.activeStep)){return;}this.activeStep=target;this.step.emit(this.activeStep);// clear boolean form when moving away from a step
|
|
1140
|
+
if(!Array.isArray(this.disableNext)){this.disableNext=false;}};this.handleBack=()=>{const lastIndex=this.parsedSteps.length-1;// Recover from collapsed sentinel if it ever occurs
|
|
1141
|
+
if(this.activeStep<0){this.activeStep=lastIndex;this.step.emit(this.activeStep);return;}if(this.activeStep>0){const target=this.activeStep-1;this.back.emit(target);this.activeStep=target;this.step.emit(this.activeStep);if(!Array.isArray(this.disableNext)){this.disableNext=false;}}};this.steps=[];this.type='static';this.orientation='vertical';this.imageSrc=undefined;this.imageWidth=undefined;this.message=undefined;this.nextLabel='Next';this.backLabel='Back';this.finishLabel='Finish';this.disableNext=false;this.headingLevel='h4';this.activeStep=0;}handleDisableNextChange(newValue){if(typeof newValue==='string'&&newValue.trim().startsWith('[')){try{this.disableNext=JSON.parse(newValue);}catch(e){console.error('Failed to parse disable-next array:',e);}}}activeStepChanged(newValue){// Clamp and ignore collapsed sentinel
|
|
1142
|
+
const max=Math.max(0,this.parsedSteps.length-1);if(newValue>max){this.activeStep=max;return;}if(newValue<-1){this.activeStep=-1;return;}if(newValue<0){return;}// ignore collapsed state if ever set elsewhere
|
|
1143
|
+
// Emit parentContext to buttons inside the newly active step
|
|
1144
|
+
setTimeout(()=>{const host=this.el.shadowRoot||this.el;const activeStepContainer=host.querySelectorAll('.step')[newValue];activeStepContainer===null||activeStepContainer===void 0?void 0:activeStepContainer.querySelectorAll('eds-button').forEach(btn=>this.emitContext(btn));},50);}componentWillLoad(){this.handleDisableNextChange(this.disableNext);}componentDidLoad(){if(this.type==='linear'){const host=this.el.shadowRoot||this.el;const btns=host.querySelectorAll('eds-button');btns===null||btns===void 0?void 0:btns.forEach(btn=>this.emitContext(btn));}}emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:this.activeStep},bubbles:true,composed:true});linkElement.dispatchEvent(event);}articleClasses(){return ['border-softer effect-focus-within relative rounded-lg border-2'].join(' ');}get parsedSteps(){return parseData(this.steps);}isStepDisabled(index){if(Array.isArray(this.disableNext)){return index<this.disableNext.length?!!this.disableNext[index]:false;}return index===this.activeStep&&!!this.disableNext;}isNextDisabledFor(index){return this.isStepDisabled(index);}renderHeading(title,index){const Tag=this.headingLevel;if(this.type==='linear'){const isOpen=this.activeStep===index;// Check if jumping to this step crosses a disabled step
|
|
1145
|
+
let forwardBlocked=false;if(index>this.activeStep){for(let i=this.activeStep;i<index;i++){if(this.isStepDisabled(i)){forwardBlocked=true;break;}}}const onKey=e=>{if(forwardBlocked){return;}if(e.key==='Enter'||e.key===' '){e.preventDefault();this.handleTitleClick(index);}};return h(Tag,{class:`eds-steps__title ${forwardBlocked?'is-disabled':''}`,role:"button",tabindex:forwardBlocked?-1:0,"aria-disabled":forwardBlocked?'true':'false',"aria-expanded":isOpen,"aria-controls":`eds-step-panel-${index}`,onClick:()=>!forwardBlocked&&this.handleTitleClick(index),onKeyDown:onKey},title);}return h(Tag,{class:"eds-steps__title",onClick:()=>this.handleTitleClick(index)},title);}/** Render horizontal indicator item */renderHorizontalIndicator(step,index){const isActive=this.activeStep===index;const isCompleted=this.activeStep>index;let forwardBlocked=false;if(index>this.activeStep){for(let i=this.activeStep;i<index;i++){if(this.isStepDisabled(i)){forwardBlocked=true;break;}}}const onKey=e=>{if(forwardBlocked){return;}if(e.key==='Enter'||e.key===' '){e.preventDefault();this.handleTitleClick(index);}};return h("div",{class:`horizontal-step ${isActive?'is-active':''} ${isCompleted?'is-completed':''}`,onClick:()=>!forwardBlocked&&this.handleTitleClick(index),onKeyDown:onKey,role:"button",tabindex:forwardBlocked?-1:0,"aria-label":`Step ${index+1}: ${step.title}`,"aria-current":isActive?'step':undefined,"aria-disabled":forwardBlocked?'true':'false'},h("div",{class:"step-indicator"},h("span",{class:"step-number"},index+1)),h("span",{class:`text-center text-default f-ui-03 ${forwardBlocked?'opacity-50':''}`},step.title));}render(){const steps=this.parsedSteps;const marginClass=this.orientation==='horizontal'?'mt-64':'mt-32';return h("div",{key:'0f9dbb87f9cd269057183ee969addd55e85b2149',class:this.articleClasses()},this.imageSrc?h("div",{class:"w-full mb-12 rounded-t-lg overflow-hidden border-2"},h("eds-img",{src:this.imageSrc,width:this.imageWidth,"with-bg":"true","lazy-load":"true",alt:"Step illustration"})):this.message&&h("div",{class:"w-full bg-[#00A595] rounded-t-lg border-2"},h("div",{class:"p-24"},h("span",{class:"text-inverse f-heading-04"},this.message))),h("div",{key:'d636d36c2e95d73c23c269b1faf67870eca97c16',class:"mt-16 pb-20 px-8"},this.type==='linear'&&this.orientation==='horizontal'?h("div",{class:"steps--horizontal",style:{'--step-count':steps.length.toString()}},h("div",{class:"horizontal-indicators"},steps.map((step,index)=>this.renderHorizontalIndicator(step,index))),steps.map((step,index)=>{const isLast=index===steps.length-1;if(this.activeStep!==index){return null;}return h("div",{class:"step-content",key:index,id:`eds-step-panel-${index}`},h("slot",{name:`step-${index}`},h("div",{class:"f-body-02 text-lighter",innerHTML:step.content})),h("div",{class:`flex items-center justify-between ${marginClass}`},h("eds-button",{label:this.backLabel,intent:"ghost",icon:"chevron-left",iconPos:"left",iconSmall:true,onClick:this.handleBack,disabled:index===0,class:index===0?'hidden':'block',size:"small"}),h("eds-button",{label:isLast?this.finishLabel:this.nextLabel,intent:"primary",icon:"chevron-right",iconSmall:true,onClick:this.handleNext,disabled:this.isNextDisabledFor(index),size:"small",class:index>0?'ml-8':null})),h("slot",{name:`actions-${index}`}));})):this.type==='linear'?h("div",{class:"steps"},steps.map((step,index)=>h("div",{class:index===0?'step':'step mt-16',key:index},this.renderHeading(step.title,index),this.activeStep===index&&h("div",{class:"content grid gap-y-16",id:`eds-step-panel-${index}`},h("slot",{name:`step-${index}`},h("div",{class:"my-16 f-body-02 text-lighter",innerHTML:step.content})),h("div",{class:`flex items-center justify-between ${marginClass}`},h("eds-button",{label:this.backLabel,intent:"ghost",icon:"chevron-left",iconPos:"left",iconSmall:true,onClick:this.handleBack,disabled:index===0,class:index===0?'hidden':'block',size:"small"}),h("eds-button",{label:index===steps.length-1?this.finishLabel:this.nextLabel,intent:"primary",icon:"chevron-right",iconSmall:true,onClick:this.handleNext,disabled:this.isNextDisabledFor(index),size:"small",class:index>0?'ml-8':null})))))):h("div",{class:"steps space-y-8"},steps.map((step,index)=>h("div",{class:"step",key:index},this.renderHeading(step.title,index),h("div",{class:"content",id:`eds-step-panel-${index}`},h("div",{class:"content-body"},h("slot",{name:`step-${index}`},h("div",{class:"my-16 f-body-02 text-lighter",innerHTML:step.content})))))))));}get el(){return getElement(this);}static get watchers(){return {"disableNext":["handleDisableNextChange"],"activeStep":["activeStepChanged"]};}};EdsStepsV2.style=EdsStepsV2Style0;const edsSwitchCss=":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.switch:focus{outline:2px solid #005fcc;outline-offset:2px}.switch:focus:not(:focus-visible){outline:none}.switch:focus-visible{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}";const EdsSwitchStyle0=edsSwitchCss;const EdsSwitch=class{constructor(hostRef){registerInstance(this,hostRef);this.uiswitch=createEvent(this,"uiswitch",7);this.toggleSwitch=()=>{if(this.disabled){return;}this.checked=!this.checked;this.uiswitch.emit({value:this.checked});sendAnalytics({category:'ui-component',tag:this.el.tagName.toLowerCase(),name:this.checked?this.labelOn:this.labelOff||'',action:'checked'});};this.handleKeyDown=e=>{if(this.disabled){return;}if(e.key==='Enter'||e.key===' '){e.preventDefault();this.toggleSwitch();}};this.checked=false;this.disabled=false;this.labelOn='';this.labelOff='';}render(){const switchId=`switch-${Math.random().toString(36).substr(2,9)}`;const labelledBy=[];if(this.labelOff){labelledBy.push(`${switchId}-off`);}if(this.labelOn){labelledBy.push(`${switchId}-on`);}const accessibleLabel=labelledBy.length===0?this.labelOn||this.labelOff?this.checked?this.labelOn:this.labelOff:'Toggle switch':undefined;return h("div",{key:'a339677097f16cd2dfe180f0a7de26d4963a9f17',class:"switch-container"},this.labelOff&&h("span",{key:'7db8e71c0f1668fb66f2b1ff049706b80b4683b3',id:`${switchId}-off`,class:"switch-label switch-label--off mr-8"},this.labelOff),h("button",{key:'ce2a8400bc42612bcb22b47ce46762348a7a7b80',id:switchId,tabindex:this.disabled?'-1':'0',type:"button",role:"switch","aria-checked":this.checked?'true':'false',"aria-disabled":this.disabled?'true':'false',"aria-labelledby":labelledBy.length>0?labelledBy.join(' '):undefined,"aria-label":accessibleLabel,class:{switch:true,'switch--checked':this.checked,'switch--disabled':this.disabled},onClick:this.toggleSwitch,onKeyDown:this.handleKeyDown,disabled:this.disabled},h("span",{key:'c7bbace6e78fe2358ee4b91febec51a280305df0',class:"switch-handle"})),this.labelOn&&h("span",{key:'b4fa05fc1296a6d906abb4a7fa609d721d01248f',id:`${switchId}-on`,class:"switch-label switch-label--on ml-8"},this.labelOn));}get el(){return getElement(this);}};EdsSwitch.style=EdsSwitchStyle0;const edsTableCss="table{text-indent:0;border-color:inherit;border-collapse:collapse;}tr.table-row-default{background-color:transparent}tr.table-row-color:nth-child(even){background-color:var(--grey-100)}tr.table-row-color:nth-child(odd){background-color:transparent}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.p-4{padding:0.25rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-8{padding-left:0.5rem;padding-right:0.5rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";const EdsTableStyle0=edsTableCss;const EdsTable=class{constructor(hostRef){registerInstance(this,hostRef);this.rowaction=createEvent(this,"rowaction",7);this.handleResize=()=>{this.updateContainerWidth();};this.onActionKeyDown=e=>{var _a;if(e.key!=='ArrowRight'&&e.key!=='ArrowLeft'){return;}e.preventDefault();const currentButton=e.target;const toolbar=currentButton.closest('[role="toolbar"]');if(!toolbar){return;}// Find all focusable action buttons in this row
|
|
1146
|
+
const actionButtons=Array.from(toolbar.querySelectorAll('eds-button'));const currentIndex=actionButtons.indexOf(currentButton);if(currentIndex===-1){return;}let nextIndex;if(e.key==='ArrowRight'){nextIndex=(currentIndex+1)%actionButtons.length;}else {nextIndex=(currentIndex-1+actionButtons.length)%actionButtons.length;}(_a=actionButtons[nextIndex])===null||_a===void 0?void 0:_a.focus();};this.handleSort=column=>{if(this.sortColumn===column){// Toggle direction if same column
|
|
1147
|
+
this.sortDirection=this.sortDirection==='asc'?'desc':'asc';}else {// New column, default to ascending
|
|
1148
|
+
this.sortColumn=column;this.sortDirection='asc';}sendAnalytics({category:'ui-component',parentContext:null,tag:`${this.hostEl.tagName.toLowerCase()}/sort`,name:column,action:this.sortDirection});};this.data=null;this.config={};this.rowsPerPage=10;this.paginationEnabled=true;this.searchEnabled=false;this.hostWidth=undefined;this.columnSize='default';this.actions=[];this.actionTemplate=undefined;this.sortingEnabled=false;this.theme='color';this.parsedActions=[];this.dataColumns=[];this.tbData=[];this.columns=[];this.currentPage=1;this.parsedConfig={};this.totalRows=0;this.searchQuery='';this.containerWidth=0;this.sortColumn=null;this.sortDirection='asc';}handleDataChange(){this.parseData();}handleConfigChange(){this.parseConfig();}handleActionsChange(){try{this.parsedActions=typeof this.actions==='string'?JSON.parse(this.actions):this.actions;}catch(_a){// eslint-disable-next-line
|
|
1098
1149
|
console.error('Failed to parse actions JSON');this.parsedActions=[];}}componentWillLoad(){this.parseConfig();this.handleActionsChange();this.parseData();}componentDidLoad(){this.updateContainerWidth();window.addEventListener('resize',this.handleResize);this.setupPaginationListener();}componentDidUpdate(){this.setupPaginationListener();}disconnectedCallback(){window.removeEventListener('resize',this.handleResize);}updateContainerWidth(){// Use hostWidth prop if provided; otherwise, measure parent element
|
|
1099
1150
|
if(this.hostWidth&&this.hostWidth.trim()!==''){this.containerWidth=Number(this.hostWidth);}else if(this.hostEl.parentElement instanceof HTMLElement){this.containerWidth=this.hostEl.parentElement.getBoundingClientRect().width;}else {this.containerWidth=400;}}parseData(){try{this.tbData=parseData(this.data);this.totalRows=this.tbData.length;this.updateColumns();this.currentPage=1;}catch(error){// eslint-disable-next-line
|
|
1100
1151
|
console.error('Failed to parse data:',error);this.tbData=[];}}parseConfig(){try{this.parsedConfig=typeof this.config==='string'?JSON.parse(this.config):this.config;}catch(error){// eslint-disable-next-line
|
|
1101
|
-
console.error('Failed to parse config:',error);this.parsedConfig={};}}setupPaginationListener(){if(!this.shouldEnablePagination()){return;}const paginationEl=this.hostEl.shadowRoot.querySelector('eds-pagination');if(paginationEl&&!paginationEl.hasAttribute('listener-attached')){paginationEl.addEventListener('page',event=>this.handlePageChange(event.detail.value));paginationEl.setAttribute('listener-attached','true');}}getFilteredRows(){return this.tbData.filter(row=>Object.values(row).some(value=>value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));}getPaginatedRows(){const
|
|
1152
|
+
console.error('Failed to parse config:',error);this.parsedConfig={};}}setupPaginationListener(){if(!this.shouldEnablePagination()){return;}const paginationEl=this.hostEl.shadowRoot.querySelector('eds-pagination');if(paginationEl&&!paginationEl.hasAttribute('listener-attached')){paginationEl.addEventListener('page',event=>this.handlePageChange(event.detail.value));paginationEl.setAttribute('listener-attached','true');}}getFilteredRows(){return this.tbData.filter(row=>Object.values(row).some(value=>value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));}getPaginatedRows(){const sortedRows=this.getSortedRows();this.totalRows=sortedRows.length;const start=(this.currentPage-1)*this.rowsPerPage;return sortedRows.slice(start,start+this.rowsPerPage);}handlePageChange(newPage){this.currentPage=newPage;sendAnalytics({category:'ui-component',parentContext:null,tag:`${this.hostEl.tagName.toLowerCase()}/eds-pagination`,name:`${newPage}`||'',action:'page'});}handleSearch(event){this.searchQuery=event.target.value;this.currentPage=1;}renderCell(value,column){var _a;const format=(_a=this.parsedConfig[column])===null||_a===void 0?void 0:_a.format;return format==='uppercase'?value===null||value===void 0?void 0:value.toString().toUpperCase():format==='svg'?h("div",{innerHTML:value}):format==='bold'?h("strong",null,value):format==='code'?h("code",null,value):value;}/**
|
|
1102
1153
|
* Renders one action (button or checkbox) for a specific action‐name.
|
|
1103
1154
|
* Used by the “Actions” column below.
|
|
1104
1155
|
*/renderSingleActionCell(actionName,row){var _a;const act=this.parsedActions.find(a=>a.name===actionName);if(this.actionTemplate){return this.actionTemplate(row);}const type=act.type||'button';if(type==='checkbox'){const boundField=(_a=act.field)!==null&&_a!==void 0?_a:act.name;const checked=!!row[boundField];return h("eds-input-field",{name:`chc-${actionName}`,label:act.label,type:"checkbox",checked:checked,onChange:e=>this.emitAction(act.name,row,e.target.checked)});}// Let all action buttons be focusable naturally
|
|
1105
1156
|
const showLabel=act.showLabel===true;const btn=h("eds-button",{icon:act.icon,label:showLabel?act.label:null,iconPos:"left",pill:true,size:"small",intent:"ghost",tabIndex:0,onClick:()=>this.emitAction(act.name,row)});return showLabel?btn:h("eds-tooltip",{content:act.label},btn);}emitAction(actionName,row,checked){sendAnalytics({category:'ui-component',parentContext:null,tag:`${this.hostEl.tagName.toLowerCase()}/action`,name:actionName,action:'click'});this.rowaction.emit({action:actionName,row,checked:!!checked});}shouldEnablePagination(){return this.paginationEnabled&&this.totalRows>this.rowsPerPage;}updateColumns(){var _a,_b;// Grab all data‐keys from the first row (if any) as before:
|
|
1106
1157
|
this.columns=this.tbData.length>0?Object.keys(this.tbData[0]):[];// Instead of pushing each action.name, add just a single “actions” column
|
|
1107
|
-
if(((_b=(_a=this.parsedActions)===null||_a===void 0?void 0:_a.length)!==null&&_b!==void 0?_b:0)>0&&this.tbData.length>0){this.columns.push('actions');}}getVisibleColumnsCount(){return this.columns.filter(column=>{var _a;return !((_a=this.parsedConfig[column])===null||_a===void 0?void 0:_a.hidden);}).length;}divisionFactor(){let divisionFactor=1;if(this.columnSize==='medium'){divisionFactor=2;}else if(this.columnSize==='large'){divisionFactor=4;}return divisionFactor;}capitalize(str){return str.charAt(0).toUpperCase()+str.slice(1).toLowerCase();}
|
|
1108
|
-
|
|
1158
|
+
if(((_b=(_a=this.parsedActions)===null||_a===void 0?void 0:_a.length)!==null&&_b!==void 0?_b:0)>0&&this.tbData.length>0){this.columns.push('actions');}}getVisibleColumnsCount(){return this.columns.filter(column=>{var _a;return !((_a=this.parsedConfig[column])===null||_a===void 0?void 0:_a.hidden);}).length;}divisionFactor(){let divisionFactor=1;if(this.columnSize==='medium'){divisionFactor=2;}else if(this.columnSize==='large'){divisionFactor=4;}return divisionFactor;}capitalize(str){return str.charAt(0).toUpperCase()+str.slice(1).toLowerCase();}getSortedRows(){const filtered=this.getFilteredRows();if(!this.sortColumn){return filtered;}return [...filtered].sort((a,b)=>{const aVal=a[this.sortColumn];const bVal=b[this.sortColumn];// Handle null/undefined
|
|
1159
|
+
if(aVal==null){return 1;}if(bVal==null){return -1;}// Compare values
|
|
1160
|
+
let comparison=0;if(typeof aVal==='number'&&typeof bVal==='number'){comparison=aVal-bVal;}else {comparison=String(aVal).localeCompare(String(bVal));}return this.sortDirection==='asc'?comparison:-comparison;});}render(){const currentContainerWidth=this.hostWidth&&this.hostWidth.trim()!==''?Number(this.hostWidth):this.containerWidth||400;const visibleColumnsCount=this.getVisibleColumnsCount();const columnWidth=visibleColumnsCount>0?Math.floor(currentContainerWidth/visibleColumnsCount*this.divisionFactor()):100;const paginatedRows=this.getPaginatedRows();const lastPage=Math.ceil(this.totalRows/this.rowsPerPage);return h("div",{key:'0601cea60a05d044a717219e6ff6385ef915defa'},this.searchEnabled&&h("div",{key:'de1affaf192dc5e63b16d534d2f518c206ab7010'},h("eds-input-field",{key:1,icon:"search",name:"search","aria-label":"Search",type:"text",placeholder:"Search...",onInput:event=>this.handleSearch(event)})),h("div",{key:'49f71b5a2481d719cb8fe0547f05a5ae83ad5541',class:"mt-20"},h("table",{key:'b63ca6615ed681c741fb2d3ff2675f9cc061d194',class:"block overflow-x-auto mt-6 p-0"},h("thead",{key:'817b534cca3c2492b69b3816a41b54ec850847ab'},h("tr",{key:'6cb8735ac56c3fe2acc4a257815bc0d07009118c',class:`m-0 p-0 border border-softer table-row-${this.theme}`},this.columns.map(col=>{var _a;if(col==='actions'){return h("th",{class:"m-0 py-8 border border-softer f-ui-02 break-words",style:{minWidth:`${columnWidth-4}px`}});}if(!((_a=this.parsedConfig[col])===null||_a===void 0?void 0:_a.hidden)){return h("th",{class:"m-0 py-8 border border-softer f-ui-02 break-words",style:{minWidth:`${columnWidth-4}px`}},h("div",{style:{display:'flex',alignItems:'center',justifyContent:'center',gap:'0.25rem'}},h("span",null,this.capitalize(col)),this.sortingEnabled&&h("eds-icon-wrapper",{icon:this.sortColumn===col?this.sortDirection==='asc'?'chevron-up':'chevron-down':'chevron-down',"aria-label":`Sort by ${col}`,onClick:()=>this.handleSort(col),style:{cursor:'pointer'}})));}return null;}))),h("tbody",{key:'3c8630ed1f47720688bfcdb78c5dbfc84cb238cf'},paginatedRows.map(row=>h("tr",{class:`m-0 p-0 border border-softer table-row-${this.theme}`},this.columns.map(col=>{var _a;if(col==='actions'){return h("td",{class:"text-center border border-softer m-0 f-ui-02 break-words actions-cell",style:{minWidth:`${columnWidth-4}px`}},h("div",{role:"toolbar","aria-label":"Row actions",onKeyDown:this.onActionKeyDown,style:{display:'flex',gap:'0.5rem',justifyContent:'center',flexWrap:'wrap'}},this.parsedActions.map(act=>h("span",{style:{whiteSpace:'nowrap'}},this.renderSingleActionCell(act.name,row)))));}if(!((_a=this.parsedConfig[col])===null||_a===void 0?void 0:_a.hidden)){// Regular data cell
|
|
1161
|
+
return h("td",{class:"text-center border border-softer m-0 py-8 f-ui-2 break-words",style:{minWidth:`${columnWidth-4}px`}},this.renderCell(row[col],col));}return null;})))))),this.shouldEnablePagination()&&h("div",{key:'09faef418edc676bb2b60c2439e0652a92fe023d',class:"mt-20"},h("eds-pagination",{key:'9403d33a37505c73fe3bec652ef93f533bdb4f03',currentPage:this.currentPage,lastPage:lastPage,perPage:this.rowsPerPage,total:this.totalRows,mode:"default"})));}get hostEl(){return getElement(this);}static get watchers(){return {"data":["handleDataChange","parseData"],"config":["handleConfigChange"],"actions":["handleActionsChange"]};}};EdsTable.style=EdsTableStyle0;const edsTabsCss="*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(147 197 253 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor;}::before,::after{--tw-content:''}a{color:inherit;text-decoration:inherit}.relative{position:relative}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.whitespace-nowrap{white-space:nowrap}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus:focus-visible{outline-style:solid}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.focus-visible\\:text-default:focus-visible{color:var(--black)}.hover\\:text-default:hover{color:var(--black)}.border-2{border-width:2px}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.after\\:bottom-0::after{bottom:0rem}.after\\:border-0::after{border-width:0px}.after\\:border-b-2::after{border-bottom-width:2px}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:rounded-lg::after{border-radius:16px}.after\\:border-solid::after{border-style:solid}.after\\:border-3::after{border-width:3px}.after\\:border-accent::after{border-color:var(--green-500)}.after\\:opacity-0::after{opacity:0}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:after\\:opacity-100:focus-visible::after{opacity:1}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.rounded-tl-lg{border-top-left-radius:16px}.rounded-tr-lg{border-top-right-radius:16px}.border-l-0{border-left-width:0px}.border-r-0{border-right-width:0px}.border-b-0{border-bottom-width:0px}.pr-28{padding-right:1.75rem}.pl-28{padding-left:1.75rem}.-mr-16{margin-right:-1rem}.-ml-16{margin-left:-1rem}.px-16{padding-left:1rem;padding-right:1rem}.py-12{padding-top:0.75rem;padding-bottom:0.75rem}.after\\:left-16::after{left:1rem}.after\\:right-16::after{right:1rem}.text-lighter{color:var(--grey-600)}.bg-dark{background-color:var(--grey-300)}.hover\\:bg-darker:hover{background-color:var(--grey-400)}.border-soft{border-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.bg-default{background-color:var(--grey-200)}.text-default{color:var(--black)}.z-99{z-index:99}.after\\:z-10::after{z-index:10}.before\\:bottom-0::before{bottom:0rem}.before\\:h-12::before{height:0.75rem}.before\\:opacity-5::before{opacity:0.05}.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.before\\:absolute::before{position:absolute}.before\\:-bottom-2::before{bottom:-0.125rem}.after\\:inset-x-0::after{left:0rem;right:0rem}.before\\:inset-x-0::before{left:0rem;right:0rem}.before\\:h-3::before{height:0.1875rem}.before\\:bg-default::before{background-color:var(--grey-200)}.after\\:border-soft::after{border-color:rgba(0, 0, 0, .15 )}.after\\:border-softest::after{border-color:rgba(0, 0, 0, .05)}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.before\\:bg-gradient-y::before{background:linear-gradient(to bottom, transparent, ease-in-out, black)}.scroller-x{-ms-overflow-style:none;scrollbar-width:none}.overflow-x-auto{overflow-x:auto}.max-w-xxxl{max-width:2200px}.z-1{z-index:1}.mx-auto{margin-left:auto;margin-right:auto}.pt-8{padding-top:0.5rem}.pr-16{padding-right:1rem}.pl-16{padding-left:1rem}.inline-flex{display:inline-flex}@media (min-width: 900px){.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}}@media (min-width: 2200px){.xxxl\\:px-0{padding-left:0rem;padding-right:0rem}}";const EdsTabsStyle0=edsTabsCss;const EdsTabs=class{constructor(hostRef){registerInstance(this,hostRef);this.tab=createEvent(this,"tab",7);this.tabRefs=[];// Store tab reference
|
|
1109
1162
|
this.setTabRef=(el,index)=>{if(el){this.tabRefs[index]=el;}};// cva configuration
|
|
1110
1163
|
this.tabCva=cva(['relative py-12','f-ui-03 whitespace-nowrap','effect-color effect-focus','focus-visible:text-default hover:text-default','border-2'],{variants:{position:{first:'px-16 rounded-t-lg',center:'px-16',left:'pl-16 pr-28 rounded-tl-lg border-r-0 -mr-16 after:right-16',right:'pl-28 pr-16 rounded-tr-lg border-l-0 -ml-16 after:left-16'},active:{false:['text-lighter bg-dark hover:bg-darker border-softest border-b-0 z-1',"after:content-[''] after:absolute after:bottom-0 after:inset-x-0 after:h-2 after:border-soft"],true:['bg-default text-default z-99','rounded-t-lg',"before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default",'border-soft']}}});this.identifier=undefined;this.navAriaLabel='Tabs';this.tabs=undefined;this.parsedTabs=[];this.activeIndex=-1;}componentWillLoad(){this.parseTabs();this.setActiveIndex();this.tab.emit({tabId:this.identifier,index:this.activeIndex});}/**
|
|
1111
1164
|
* Parses the `tabs` prop into an array of tab objects.
|
|
@@ -1123,12 +1176,12 @@ this.activeIndex=index;this.parsedTabs=this.parsedTabs.map((tab,tabIndex)=>Objec
|
|
|
1123
1176
|
if(shouldFocus){sendAnalytics({category:'ui-component',tag:this.el.tagName.toLowerCase(),name:(tabLabel===null||tabLabel===void 0?void 0:tabLabel.toLowerCase())||'',action:'click'});}// Focus management for keyboard navigation
|
|
1124
1177
|
if(shouldFocus&&this.tabRefs[index]){// Use a small timeout to ensure the DOM has updated
|
|
1125
1178
|
setTimeout(()=>{var _a;(_a=this.tabRefs[index])===null||_a===void 0?void 0:_a.focus();},0);}}onKeyDown(ev,idx){let newIndex=idx;switch(ev.key){case'ArrowRight':newIndex=(idx+1)%this.parsedTabs.length;ev.preventDefault();break;case'ArrowLeft':newIndex=(idx-1+this.parsedTabs.length)%this.parsedTabs.length;ev.preventDefault();break;case'Home':newIndex=0;ev.preventDefault();break;case'End':newIndex=this.parsedTabs.length-1;ev.preventDefault();break;default:return;// Don't handle other keys
|
|
1126
|
-
}if(newIndex!==idx){this.handleTabClick(newIndex,this.parsedTabs[newIndex].label,true);}}render(){return h("div",{key:'
|
|
1179
|
+
}if(newIndex!==idx){this.handleTabClick(newIndex,this.parsedTabs[newIndex].label,true);}}render(){return h("div",{key:'36b4771f5dc68c2b2686ece5957b4a54f70d8c38',id:`${this.identifier}`},h("div",{key:'0b9cac117898a5c8d179c69aaa971c63fed5b12c',class:"scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"},h("nav",{key:'6bb2ca84bd9b12e67bb2e6055cb435c66061f547',role:"tablist",ref:el=>this.tabContainer=el,class:"inline-flex","aria-label":this.navAriaLabel},this.parsedTabs.map((tab,index)=>{const TabComponent='button';const tabProps=this.getTabOptions(tab.active,index);const isActive=index===this.activeIndex;return h(TabComponent,Object.assign({},tabProps,{type:"button",role:"tab","aria-selected":tab.active?'true':'false',tabIndex:isActive?0:-1,"aria-label":tab.ariaLabel||tab.label,"aria-controls":`panel-${index}`,id:`tab-${index}`,ref:el=>this.setTabRef(el,index),onClick:()=>this.handleTabClick(index,tab.label,true),onKeyDown:e=>this.onKeyDown(e,index)}),tab.label||tab.ariaLabel);}))),h("div",{key:'7b17d99c5dda91842171c941228b0a0f82d595d4',class:"tab-panels"},this.parsedTabs.map((_,index)=>h("div",{role:"tabpanel",id:`panel-${index}`,"aria-labelledby":`tab-${index}`,hidden:index!==this.activeIndex,tabIndex:index===this.activeIndex?0:-1,class:"effect-focus"},h("slot",{name:`panel-${index}`})))));}get el(){return getElement(this);}static get watchers(){return {"tabs":["parseTabs"]};}};EdsTabs.style=EdsTabsStyle0;const edsTagCss=".f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-2{padding-top:0.125rem;padding-bottom:0.125rem}.py-3{padding-top:0.1875rem;padding-bottom:0.1875rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.px-5{padding-left:0.3125rem;padding-right:0.3125rem}.px-6{padding-left:0.375rem;padding-right:0.375rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-accent{background-color:var(--green-500)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}";const EdsTagStyle0=edsTagCss;// Define the CVA for the tag styles
|
|
1127
1180
|
const tagStyles=cva(['border-2 rounded-pill'],// Base classes
|
|
1128
1181
|
{variants:{intent:{primary:'border-accent bg-accent',default:'border-default',strong:'text-inverse bg-strongest border-default',accent:'text-[#0034CB] border-[#0034CB]',weak:'text-light bg-strongest-soft border-transparent',inverse:'border-inverse text-inverse','inverse-strong':'bg-inverse border-inverse text-lighter'},size:{small:'f-ui-05 py-2 px-4',// smaller padding
|
|
1129
1182
|
medium:'f-ui-03 py-3 px-5',// moderate padding
|
|
1130
1183
|
large:'f-ui-01 py-4 px-6'// larger padding
|
|
1131
|
-
}},defaultVariants:{intent:'default',size:'small'}});const EdsTag=class{constructor(hostRef){registerInstance(this,hostRef);this.label=undefined;this.intent='default';this.size='small';}render(){const classes=tagStyles({intent:this.intent,size:this.size});return h("span",{key:'
|
|
1184
|
+
}},defaultVariants:{intent:'default',size:'small'}});const EdsTag=class{constructor(hostRef){registerInstance(this,hostRef);this.label=undefined;this.intent='default';this.size='small';}render(){const classes=tagStyles({intent:this.intent,size:this.size});return h("span",{key:'0b37fdd21a8828a00daba55a7157e164e7057a88',class:classes},this.label);}};EdsTag.style=EdsTagStyle0;const edsToastCss=".relative{position:relative}.right-4{right:0.25rem}.bottom-4{bottom:0.25rem}.w-auto{width:auto}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:0.25rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.ml-8{margin-left:0.5rem}.p-12{padding:0.75rem}.rounded-lg{border-radius:16px}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),\n 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-dark{background-color:var(--grey-300)}.bg-success{background-color:var(--green-200)}.bg-error{background-color:var(--red-200)}.bg-warning{background-color:var(--yellow-200)}.text-light{color:var(--grey-700)}.text-current{color:currentColor}.text-default{color:var(--black)}";const EdsToastStyle0=edsToastCss;const toastStyles=cva(['relative bottom-4 w-auto p-12 rounded-lg shadow-md'],{variants:{intent:{default:'bg-dark text-light',success:'bg-success text-dark',error:'bg-error text-light',warning:'bg-warning text-dark'}},defaultVariants:{intent:'default'}});const EdsToast=class{constructor(hostRef){registerInstance(this,hostRef);this.toast=createEvent(this,"toast",7);/**
|
|
1132
1185
|
* Dismisses the toast.
|
|
1133
1186
|
*/this.dismissToast=()=>{this.toast.emit({visible:false,label:'dismissed'});this.visible=false;};this.message=undefined;this.intent='default';this.duration=undefined;this.visible=true;}componentDidLoad(){const btn=this.el.shadowRoot.querySelector('eds-button');this.emitContext(btn);}/**
|
|
1134
1187
|
* Emits a custom event called `parentContext` for a given button element.
|
|
@@ -1136,13 +1189,13 @@ large:'f-ui-01 py-4 px-6'// larger padding
|
|
|
1136
1189
|
*
|
|
1137
1190
|
* @param btnElement - The link element to which the event will be dispatched.
|
|
1138
1191
|
*/emitContext(btnElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});btnElement.dispatchEvent(event);}connectedCallback(){if(this.duration&&this.duration>0){this.dismissTimeout=setTimeout(this.dismissToast,this.duration);}}disconnectedCallback(){// Clear the timeout when the component is removed
|
|
1139
|
-
clearTimeout(this.dismissTimeout);}render(){if(!this.visible){return null;}const classes=toastStyles({intent:this.intent});return h("div",{class:classes,role:"alert","aria-live":"assertive"},h("div",{class:"flex items-center justify-between gap-4"},h("span",{class:"f-ui-01"},this.message),h("eds-button",{intent:"tertiary",icon:"close","aria-label":"Close Toast",onClick:()=>this.dismissToast(),"extra-class":"ml-8"})));}get el(){return getElement(this);}};EdsToast.style=EdsToastStyle0;const edsTooltipCss=".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.top-full{top:100%}.bottom-full{bottom:100%}.right-full{right:100%}.left-full{left:100%}.mr-2{margin-right:0.125rem}.ml-2{margin-left:0.125rem}.mt-2{margin-top:0.125rem}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}.max-w-\\[20rem\\]{max-width:20rem}.whitespace-normal{white-space:normal}.break-words{overflow-wrap:break-word}.w-full{width:100%}";const EdsTooltipStyle0=edsTooltipCss;const EdsTooltip=class{constructor(hostRef){registerInstance(this,hostRef);this.content=undefined;this.position='top';}/** fire analytics on every hover */handleHover(){sendAnalytics({category:'ui-component',tag:this.el.tagName.toLowerCase(),name:this.content.toLowerCase(),action:'hover'});}render(){const positionClass=this.position==='bottom'?'top-full mt-2':'bottom-full mb-2';return h("div",{key:'
|
|
1192
|
+
clearTimeout(this.dismissTimeout);}render(){if(!this.visible){return null;}const classes=toastStyles({intent:this.intent});return h("div",{class:classes,role:"alert","aria-live":"assertive"},h("div",{class:"flex items-center justify-between gap-4"},h("span",{class:"f-ui-01"},this.message),h("eds-button",{intent:"tertiary",icon:"close","aria-label":"Close Toast",onClick:()=>this.dismissToast(),"extra-class":"ml-8"})));}get el(){return getElement(this);}};EdsToast.style=EdsToastStyle0;const edsTooltipCss=".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.top-full{top:100%}.bottom-full{bottom:100%}.right-full{right:100%}.left-full{left:100%}.mr-2{margin-right:0.125rem}.ml-2{margin-left:0.125rem}.mt-2{margin-top:0.125rem}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}.max-w-\\[20rem\\]{max-width:20rem}.whitespace-normal{white-space:normal}.break-words{overflow-wrap:break-word}.w-full{width:100%}";const EdsTooltipStyle0=edsTooltipCss;const EdsTooltip=class{constructor(hostRef){registerInstance(this,hostRef);this.content=undefined;this.position='top';}/** fire analytics on every hover */handleHover(){sendAnalytics({category:'ui-component',tag:this.el.tagName.toLowerCase(),name:this.content.toLowerCase(),action:'hover'});}render(){const positionClass=this.position==='bottom'?'top-full mt-2':'bottom-full mb-2';return h("div",{key:'1ba27ac30f67a50e39b2bfdff2b4392b4adc948a',class:"relative w-full inline-block group"},h("slot",{key:'c84887cde7b92c3684ef61e36039d2e8c96f71f2'}),h("div",{key:'c7e475e74d977b6ab291ba8a315cdb237742a8e6',class:`absolute ${positionClass}
|
|
1140
1193
|
rounded-xs bg-strongest text-inverse
|
|
1141
1194
|
f-ui-03-light pointer-events-none
|
|
1142
1195
|
z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out
|
|
1143
1196
|
group-hover:opacity-100 whitespace-normal break-words`,role:"tooltip"},this.content));}get el(){return getElement(this);}};EdsTooltip.style=EdsTooltipStyle0;const edsUserCss="hr,p{margin:0}.block{display:block}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.text-default{color:var(--black)}.min-w-\\[280px\\]{min-width:280px}.p-8{padding:0.5rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.gap-y-8{row-gap:0.5rem}.pb-16{padding-bottom:1rem}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1 )}.max-w-full{max-width:100%}.w-full{width:100%}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.mt-4{margin-top:0.25rem}.mt-16{margin-top:1rem}";const EdsUserStyle0=edsUserCss;const EdsUser=class{constructor(hostRef){registerInstance(this,hostRef);this.handleDropdown=e=>{this.expanded=e.detail.expanded;};this.user=undefined;this.intent='tertiary';this.dropdownLabel='Account';this.expanded=false;this.shortMode=false;}/**
|
|
1144
1197
|
* Helper getter to ensure we work with a User object.
|
|
1145
1198
|
*/get parsedUser(){if(typeof this.user==='string'){try{return JSON.parse(this.user);}catch(error){//console.error('Failed to parse user JSON:', error);
|
|
1146
|
-
return {};}}return this.user;}async componentWillLoad(){}get initials(){var _a,_b,_c,_d;const user=this.parsedUser;const initials=`${((_a=user.given_name)===null||_a===void 0?void 0:_a.charAt(0))||''}${((_b=user.family_name)===null||_b===void 0?void 0:_b.charAt(0))||''}`.toUpperCase();return initials||((_d=(_c=user.name)===null||_c===void 0?void 0:_c.charAt(0))===null||_d===void 0?void 0:_d.toUpperCase())||'';}async closeDropdown(){var _a;await((_a=this.dropdownEl)===null||_a===void 0?void 0:_a.close());this.expanded=false;}render(){const user=this.parsedUser;const iconName=this.expanded?'chevron-down':'chevron-right';return h("div",{key:'
|
|
1199
|
+
return {};}}return this.user;}async componentWillLoad(){}get initials(){var _a,_b,_c,_d;const user=this.parsedUser;const initials=`${((_a=user.given_name)===null||_a===void 0?void 0:_a.charAt(0))||''}${((_b=user.family_name)===null||_b===void 0?void 0:_b.charAt(0))||''}`.toUpperCase();return initials||((_d=(_c=user.name)===null||_c===void 0?void 0:_c.charAt(0))===null||_d===void 0?void 0:_d.toUpperCase())||'';}async closeDropdown(){var _a;await((_a=this.dropdownEl)===null||_a===void 0?void 0:_a.close());this.expanded=false;}render(){const user=this.parsedUser;const iconName=this.expanded?'chevron-down':'chevron-right';return h("div",{key:'1c4017bd33c81ad29385e164dc8611cfac58eca0',class:"block"},h("div",{key:'b692ce5a4b6b424c7e109589bdff5617d4e3b33c',class:"flex items-center"},h("eds-dropdown",{key:'0df9e3b3c5212433ec88da84edd746a1dce8c763',ref:el=>this.dropdownEl=el,label:this.dropdownLabel,intent:this.intent,"aria-label":"User Menu","dropdown-pos":"right","dropdown-offset":"false",icon:iconName,class:"text-default",onDropdown:this.handleDropdown},h("div",{key:'ef25176f1fc1796dde0b1d56264617d067d06adb',class:"min-w-[280px] p-8"},h("div",{key:'539532b05094ad47281f7d03c7900b93162e175a',class:"flex gap-x-16","data-dropdown-no-close":true},h("eds-avatar",{key:'ff51082744e2d32e5bc57069ccc99a3214ac3c03',"first-name":user.given_name,"last-name":user.family_name,initials:this.initials,color:"black"}),h("div",{key:'1850d3ad72889a446fb8f5f29cf96d7434bc8c81',class:"max-w-full"},user.name&&h("p",{key:'29a458e82be47f3b4ce801e289253158b6f7372b',class:"f-ui-01 text-default w-full text-ellipsis"},user.name),user.preferred_username&&h("p",{key:'fbb49fa957c32bd90b15dd71691b975c920049bb',class:"f-ui-03-light text-light mt-4"},user.preferred_username),user.email&&h("p",{key:'e634ceb7b74062a19f466abb1f50266370a82747',class:"f-ui-03-light text-light mt-4"},user.email))),h("div",{key:'3a8a04862973d0e28d7c62d84a6928953fd08df3',class:"text-default flex w-full flex-col gap-y-8"},h("slot",{key:'50627b6ed0b735079d60b66092181334cd1a954a'}))))));}get hostEl(){return getElement(this);}};EdsUser.style=EdsUserStyle0;
|
|
1147
1200
|
|
|
1148
|
-
export { EdsAccordion as eds_accordion, EdsAlert as eds_alert, EdsAvatar as eds_avatar, EdsBlockBreak as eds_block_break, EdsBreadcrumb as eds_breadcrumb, EdsButton as eds_button, EdsCodeBlock as eds_code_block, EdsDropdown as eds_dropdown, EdsForm as eds_form, EdsGlobalSearch as eds_global_search, EdsHeader as eds_header, EdsIconWrapper as eds_icon_wrapper, EdsImg as eds_img, EdsInput as eds_input, EdsInputField as eds_input_field, EdsInputFooter as eds_input_footer, EdsInputLabel as eds_input_label, EdsInputRange as eds_input_range, EdsInputSearch as eds_input_search, EdsInputSelect as eds_input_select, EdsLink as eds_link, EdsLogo as eds_logo, EdsMatomoNotice as eds_matomo_notice, EdsNps as eds_nps, EdsPagination as eds_pagination, EdsRating as eds_rating, EdsSpinner as eds_spinner, EdsSteps as eds_steps, EdsStepsV2 as eds_steps_v2, EdsSwitch as eds_switch, EdsTable as eds_table, EdsTabs as eds_tabs, EdsTag as eds_tag, EdsToast as eds_toast, EdsTooltip as eds_tooltip, EdsUser as eds_user };
|
|
1201
|
+
export { EdsAccordion as eds_accordion, EdsAlert as eds_alert, EdsAvatar as eds_avatar, EdsBlockBreak as eds_block_break, EdsBreadcrumb as eds_breadcrumb, EdsButton as eds_button, EdsCodeBlock as eds_code_block, EdsDropdown as eds_dropdown, EdsForm as eds_form, EdsGlobalSearch as eds_global_search, EdsHeader as eds_header, EdsIconWrapper as eds_icon_wrapper, EdsImg as eds_img, EdsInput as eds_input, EdsInputField as eds_input_field, EdsInputFooter as eds_input_footer, EdsInputLabel as eds_input_label, EdsInputRange as eds_input_range, EdsInputSearch as eds_input_search, EdsInputSelect as eds_input_select, EdsLink as eds_link, EdsLogo as eds_logo, EdsMatomoNotice as eds_matomo_notice, EdsNps as eds_nps, EdsPagination as eds_pagination, EdsRating as eds_rating, EdsSidebar as eds_sidebar, EdsSpinner as eds_spinner, EdsSteps as eds_steps, EdsStepsV2 as eds_steps_v2, EdsSwitch as eds_switch, EdsTable as eds_table, EdsTabs as eds_tabs, EdsTag as eds_tag, EdsToast as eds_toast, EdsTooltip as eds_tooltip, EdsUser as eds_user };
|