@layer components {[pi-helper]{position:relative;display:grid;box-sizing:border-box;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;width:100%;font-family:var(--pi-font-family);--pi-helper-close-btn-space: 0;--pi-helper-bg-color: transparent;--pi-helper-border-color: transparent;--pi-helper-title-color: var(--pi-color-neutral-700);--pi-helper-content-color: var(--pi-color-neutral-700);--pi-helper-icon-color: var(--pi-color-neutral-600);--icon-size: var(--pi-helper-icon-size, 20px);--icon-space: max(0px, calc((20px - var(--icon-size)) / 2));--icon-content-space: var(--pi-size-spacing-8)}[pi-helper]>:is([pi-icon],img){--pi-icon-size: var(--icon-size);color:var(--pi-helper-icon-color);height:var(--icon-size);line-height:1;position:absolute;top:calc(var(--pi-size-spacing-12) + var(--icon-space));left:calc(var(--pi-size-spacing-12) + var(--icon-space));grid-area:unset}[pi-helper]>img{width:var(--icon-size)}[pi-helper]>section{color:var(--pi-helper-content-color);font-weight:var(--pi-font-weight-medium);font-size:var(--pi-size-font-paragraph-13-text);line-height:var(--pi-size-font-paragraph-13-line);text-align:left;width:auto;display:flex;flex-direction:column;gap:var(--pi-size-spacing-8);margin-bottom:var(--pi-size-spacing-4);grid-column:1/2;grid-row:2/3}[pi-helper]>section>h1,[pi-helper]>section>h2,[pi-helper]>section>h3,[pi-helper]>section>h4,[pi-helper]>section>h5,[pi-helper]>section>h6{color:var(--pi-helper-title-color);font-weight:var(--pi-font-weight-extra-bold);font-size:var(--pi-size-font-single-line-15-text);line-height:var(--pi-size-font-single-line-15-line);letter-spacing:var(--pi-size-font-single-line-15-spacing);text-align:left;margin:0}[pi-helper]>section>p{margin:0}[pi-helper]>footer{display:flex;align-items:center;gap:var(--pi-size-spacing-8);justify-content:flex-start;grid-column:1/2;grid-row:3/4;padding-right:0}[pi-helper]>:is(i[pi-icon],img)~:where(section,footer){padding-left:calc(var(--icon-size) + var(--icon-content-space))}[pi-helper][pi-simple]:not([pi-simple=false]){--icon-size: var(--pi-size-spacing-16);--icon-content-space: var(--pi-size-spacing-8)}[pi-helper][pi-simple]:not([pi-simple=false])>:is([pi-icon],img){grid-area:content;translate:0 -50%;top:50%;left:0}[pi-helper][pi-simple]:not([pi-simple=false])>section{margin-bottom:0}[pi-helper][pi-simple]:not([pi-simple=false])>:is(section,p){font:normal 400 .6875rem/.875rem var(--pi-font-family)}[pi-helper=solid]{--pi-helper-bg-color: var(--pi-color-neutral-50);--pi-helper-border-color: var(--pi-color-neutral-300);background-color:var(--pi-helper-bg-color);border:1px solid var(--pi-helper-border-color);border-radius:var(--pi-helper-border-radius-override, var(--pi-size-border-radius-12));padding:var(--pi-size-spacing-12)}[pi-helper=transparent]>:is([pi-icon],img){inset:var(--icon-space)}[pi-helper][pi-color=neutral]{--pi-helper-title-color: var(--pi-color-neutral-700);--pi-helper-icon-color: var(--pi-color-neutral-600);--pi-helper-colorful-color: var(--pi-color-neutral-600);--pi-helper-content-color: var(--pi-color-neutral-700)}[pi-helper][pi-color=neutral][pi-helper=solid]{--pi-helper-bg-color: var(--pi-color-neutral-50);--pi-helper-border-color: var(--pi-color-neutral-300)}[pi-helper][pi-color=info]{--pi-helper-title-color: var(--pi-color-info-700);--pi-helper-icon-color: var(--pi-color-info-600);--pi-helper-colorful-color: var(--pi-color-info-600);--pi-helper-content-color: var(--pi-color-neutral-700)}[pi-helper][pi-color=info][pi-helper=solid]{--pi-helper-bg-color: var(--pi-color-info-50);--pi-helper-border-color: var(--pi-color-info-300)}[pi-helper][pi-color=success]{--pi-helper-title-color: var(--pi-color-success-700);--pi-helper-icon-color: var(--pi-color-success-600);--pi-helper-colorful-color: var(--pi-color-success-600);--pi-helper-content-color: var(--pi-color-neutral-700)}[pi-helper][pi-color=success][pi-helper=solid]{--pi-helper-bg-color: var(--pi-color-success-50);--pi-helper-border-color: var(--pi-color-success-300)}[pi-helper][pi-color=warning]{--pi-helper-title-color: var(--pi-color-warning-700);--pi-helper-icon-color: var(--pi-color-warning-600);--pi-helper-colorful-color: var(--pi-color-warning-600);--pi-helper-content-color: var(--pi-color-neutral-700)}[pi-helper][pi-color=warning][pi-helper=solid]{--pi-helper-bg-color: var(--pi-color-warning-50);--pi-helper-border-color: var(--pi-color-warning-300)}[pi-helper][pi-color=danger]{--pi-helper-title-color: var(--pi-color-danger-700);--pi-helper-icon-color: var(--pi-color-danger-600);--pi-helper-colorful-color: var(--pi-color-danger-600);--pi-helper-content-color: var(--pi-color-neutral-700)}[pi-helper][pi-color=danger][pi-helper=solid]{--pi-helper-bg-color: var(--pi-color-danger-50);--pi-helper-border-color: var(--pi-color-danger-300)}[pi-helper][pi-color=white]{--pi-helper-title-color: var(--pi-color-neutral-900);--pi-helper-icon-color: var(--pi-color-neutral-500);--pi-helper-colorful-color: var(--pi-color-neutral-700);--pi-helper-content-color: var(--pi-color-neutral-700)}[pi-helper][pi-color=white][pi-helper=solid]{--pi-helper-bg-color: var(--pi-color-white);--pi-helper-border-color: var(--pi-color-neutral-200)}[pi-helper][pi-controls-align=right]{grid-template-areas:"content footer";grid-template-columns:1fr auto;grid-template-rows:1fr;gap:var(--pi-size-spacing-12)}[pi-helper][pi-controls-align=right]>section{grid-area:content;align-self:center}[pi-helper][pi-controls-align=right]>footer{grid-area:footer;align-self:center;padding-right:var(--pi-helper-close-btn-space)}[pi-helper]:not([pi-controls-align=right]),[pi-helper][pi-controls-align=bottom]{grid-template-areas:"content" "footer";grid-template-columns:1fr;grid-template-rows:auto 1fr auto}[pi-helper]:not([pi-controls-align=right])>section,[pi-helper][pi-controls-align=bottom]>section{grid-area:content}[pi-helper]:not([pi-controls-align=right])>footer,[pi-helper][pi-controls-align=bottom]>footer{grid-area:footer;margin-top:var(--pi-size-spacing-12)}[pi-helper][pi-colorful]>section,[pi-helper][pi-colorful]>div[pi-helper-content]{color:var(--pi-helper-colorful-color)}[pi-helper][pi-close-button]{--pi-helper-close-btn-space: var(--pi-size-spacing-40)}[pi-helper][pi-close-button]>button{position:absolute;right:var(--pi-size-spacing-12);z-index:1;display:flex;align-items:center;margin:0;padding:0;background:none;border:none;box-shadow:none;cursor:pointer}[pi-helper][pi-close-button]:not([pi-controls-align=right])>section{padding-right:var(--pi-helper-close-btn-space)}[pi-helper][pi-close-button][pi-controls-align=right]>button{top:50%;transform:translateY(-50%)}[pi-helper][pi-close-button]:not([pi-controls-align=right])>button{top:var(--pi-size-spacing-12);transform:none}}