@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;top:var(--header-height);height:calc(100vh - var(--header-height));overflow-y:auto;border-right:1px solid var(--border-color)}.sidenav-components{padding-bottom:.5rem}.category-name{margin:0 1rem;padding:1.5rem 0 .5rem;border-bottom:1px solid var(--border-color)}.main-content{margin-top:var(--header-height);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-05);margin-bottom:var(--spacing-05)}.page-container .comp-header .comp-title{margin:0}.footer .footer-content{padding:var(--spacing-05) var(--spacing-07)}.page-tabs>goat-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-09)}.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-09)}.component-section>goat-text[type=body]{margin-bottom:var(--spacing-05)}.component-container{display:flex;align-items:center;margin-bottom:var(--spacing-05);flex-wrap:wrap;gap:1rem}.playground-container{border:1px solid var(--border-color);margin-bottom:2rem;border-radius:var(--border-radius);background:var(--background)}.playground-container .playground{display:flex;border-bottom:1px solid var(--border-color);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(--border-color);border-bottom:1px solid var(--border-color)}.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-09)}.demo-canvas .demo-area{display:flex;padding:var(--spacing-09);align-items:center;justify-content:center;padding-block:var(--spacing-12);background:linear-gradient(120deg,var(--color-red-10),var(--color-yellow-10))}.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}@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}