@media(max-width:671px){.show-mobile{display:unset}.hide-mobile,.hide-tablet-portrait-below{display:none}.show-tablet-portrait-below{display:unset}.hide-tablet-landscape-below,.show-desktop{display:none}.hide-desktop{display:unset}}@media(min-width:672px){.show-mobile,.hide-tablet-portrait-below{display:none}.show-tablet-portrait-below{display:unset}.hide-tablet-landscape-below,.show-desktop{display:none}.hide-desktop{display:unset}}@media(min-width:1056px){.show-mobile,.hide-tablet-landscape-below,.show-tablet-portrait-below{display:none}.hide-tablet-portrait-below,.hide-desktop{display:unset}.show-desktop{display:none}}@media(min-width:1312px){.hide-tablet-landscape-below{display:unset}.show-tablet-portrait-below{display:none}.hide-tablet-portrait-below{display:unset}.hide-desktop{display:none}.show-desktop{display:unset}}:root{--header-height: 3rem}.top-nav{box-shadow:var(--shadow-sm);border-bottom:1px solid var(--border-strong-01)}.sidenav{width:15rem;position:fixed;height:100vh;overflow-y:auto;border-right:1px solid var(--color-outline)}.sidenav-components{padding-bottom:.5rem}.category-name{margin:0 1rem;padding:1.5rem 0 .5rem;border-bottom:1px solid var(--color-outline)}.main-content{margin-inline-start:15rem;position:relative;min-height:calc(100vh - var(--header-height));display:flex;flex-direction:column}.page-container .comp-header{display:flex;align-items:center;gap:var(--spacing-200);margin-bottom:var(--spacing-200)}.page-container .comp-header .comp-title{margin:0}.footer .footer-content{padding:var(--spacing-200) var(--spacing-400)}.page-tabs>pc-tab-panel{padding-top:1rem}pre[class*=language-]{margin:0}.component-overview-tab{display:flex;gap:1rem}.component-overview-tab .component-content{flex:1;overflow-x:auto}.component-overview-tab .component-content .component-description{margin-bottom:var(--spacing-600)}.component-overview-tab .section-nav{width:23rem;position:relative;height:auto!important}.component-overview-tab .section-nav .link{width:100%}.component-section{margin-bottom:var(--spacing-600)}.component-section>goat-text[type=body]{margin-bottom:var(--spacing-200)}.component-container{display:flex;align-items:center;margin-bottom:var(--spacing-200);flex-wrap:wrap;gap:1rem}.playground-container{border:1px solid var(--color-outline);margin-bottom:2rem;border-radius:var(--border-radius);background:var(--background)}.playground-container .playground{display:flex;border-bottom:1px solid var(--color-outline);flex-direction:column}.playground-container .playground .demo-area{min-height:10rem;padding:1rem;display:flex;align-items:center;justify-content:center;border-inline-end:1px solid var(--color-outline);border-bottom:1px solid var(--color-outline)}.playground-container .playground .demo-controls{display:flex;gap:1rem;flex-wrap:wrap;padding:1rem;width:100%}.playground-container .code-editor-container{padding:1px}.playground-container .code-editor-container .code-editor{height:10rem}@media(min-width:1056px){.playground-container .playground{flex-direction:row}.playground-container .playground .demo-area{min-height:20rem;flex:1;border-bottom:none}.playground-container .playground .demo-controls{width:20rem;display:block}}.centered{display:flex;align-items:center;justify-content:center}.table-auto-height{min-height:auto}.api-section{margin-bottom:var(--spacing-600)}.demo-canvas .demo-area{display:flex;padding:var(--spacing-600);align-items:center;justify-content:center;padding-block:var(--spacing-1200);background:linear-gradient(120deg,var(--color-primary-95),var(--color-secondary-95))}.demo-input .demo-area-inner{max-width:20rem;margin:auto}.demo-components .demo-area{display:flex;align-items:center;flex-wrap:wrap;gap:1rem}.previous-next-nav{display:flex;align-items:center;justify-content:space-between;--icon-color: white}.previous-next-nav pc-button{--filled-button-container-color: var(--color-secondary)}@media only screen and (max-width:1055px){.sidenav{width:100%;position:inherit;overflow:initial}.main-content{margin-inline-start:0}#dir-switcher,.sidenav.m-hide,.main-content.m-hide,.section-nav{display:none}.component-content{width:100%}}.section-nav-content{position:sticky;top:60px}.adsbygoogle{display:block}