code[class*=language-],pre[class*=language-]{background:none;color:var(--docs-color-on-background-surface-1);font-family:var(--docs-font-family-mono);text-align:left;text-shadow:none;white-space:pre;word-break:normal;word-spacing:normal;word-wrap:normal;border-radius:var(--docs-border-radius-md);hyphens:none;line-height:1.5;-moz-tab-size:2;-o-tab-size:2;tab-size:2}pre[class*=language-]{background-color:var(--docs-color-background-surface-1);border:var(--docs-border-width-thin) solid var(--docs-color-border-surface-1);border-radius:var(--docs-border-radius-md);box-shadow:var(--docs-shadow-xs);margin:1em 0;overflow:auto;padding:1.25em;position:relative;transition:all .2s ease}pre[class*=language-]:before{border-bottom-left-radius:var(--docs-border-radius-sm);border-bottom-right-radius:var(--docs-border-radius-sm);color:var(--docs-color-on-background-surface-2-disabled);content:attr(data-language);font-size:.75rem;opacity:.7;padding:.25rem .5rem;position:absolute;right:1rem;text-transform:uppercase;top:0;transition:opacity .2s ease}pre[class*=language-]:hover:before{opacity:1}pre[class*=language-]:hover{box-shadow:var(--docs-shadow-sm)}:not(pre)>code[class*=language-]{align-items:center;background-color:var(--docs-color-background-surface-1);border-radius:var(--docs-border-radius-sm);display:inline-flex;font-size:.85em;margin:0 .1em;padding:.2em .4em;white-space:normal}.token.cdata,.token.doctype,.token.prolog{color:var(--docs-color-on-background-surface-1-disabled)}.token.comment{color:var(--docs-code-token-comment);font-style:italic}.token.punctuation{color:var(--docs-code-token-punctuation)}.token.namespace{color:var(--docs-code-token-namespace);opacity:.8}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:var(--docs-code-token-tag)}.token.boolean,.token.number{color:var(--docs-code-token-number)}.token.builtin,.token.char,.token.inserted,.token.string{color:var(--docs-code-token-string)}.token.attr-name{color:var(--docs-code-token-attribute-name);font-style:italic}.token.selector{color:var(--docs-code-token-selector)}.token.entity,.token.operator,.token.url,.token.variable{color:var(--docs-code-token-variable)}.language-css .token.string,.style .token.string{color:var(--docs-code-token-string)}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:var(--docs-code-token-function)}.token.keyword{color:var(--docs-code-pre-token-keyword);font-weight:var(--docs-font-weight-medium)}.token.important,.token.regex{color:var(--docs-color-foreground-warning)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:defined{opacity:1;transition:opacity .1s}.preview{margin-bottom:1.5rem}.preview:not(.preview--no-styles){background-color:var(--docs-color-background-page);border:1px solid var(--gstock-color-border);border-radius:var(--gstock-border-radius-md);position:relative;transition:border-radius .3s cubic-bezier(.4,0,.2,1) 0s}.preview .preview__canvas{max-width:100%;min-width:20rem;padding:1.25rem 3.25rem 1.25rem 1.25rem}.preview:not(.preview--no-styles) .preview__canvas{background-color:var(--gstock-color-surface);background-image:linear-gradient(45deg,var(--gstock-color-background-disabled) 25%,transparent 25%),linear-gradient(135deg,var(--gstock-color-background-disabled) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--gstock-color-background-disabled) 75%),linear-gradient(135deg,transparent 75%,var(--gstock-color-background-disabled) 75%);background-position:0 0,12.5px 0,12.5px -12.5px,0 12.5px;background-size:25px 25px;border-radius:var(--gstock-border-radius-md) var(--gstock-border-radius-md) 0 0;color:var(--gstock-color-text);position:relative}.preview--border .preview__canvas{border:2px solid #f0f;padding:0}.preview--border .preview__canvas>:not(.output,.preview__resizer,.preview__size-info,gstock-animation),.preview--border .preview__canvas>gstock-animation>:not(.output,.preview__resizer,.preview__size-info){margin:0}.preview__canvas>:not(.output,.preview__resizer,.preview__size-info,gstock-animation),.preview__canvas>gstock-animation>:not(.output,.preview__resizer,.preview__size-info){margin:.5rem}.preview__canvas--dragging:after{content:"";cursor:ew-resize;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.preview__resizer{align-items:center;background-color:var(--docs-color-layout-gray-100);border-left:2px dotted var(--docs-color-layout-gray-200);border-radius:0 var(--gstock-border-radius-md) var(--gstock-border-radius-md) 0;bottom:0;color:var(--docs-color-layout-gray-600);cursor:ew-resize;display:flex;font-size:20px;justify-content:center;position:absolute;right:0;top:0;width:1.75rem}@media screen and (max-width:600px){.preview__canvas{padding-right:1.5rem}.preview__resizer{display:none}}.preview__size-info{display:none;padding:0;position:absolute;right:32px;top:4px}.preview__canvas--dragging .preview__size-info{display:block}.preview__size-info>span{align-items:center;background-color:rgba(0,0,0,.1);border-radius:var(--gstock-border-radius-md);display:inline-flex;font-size:var(--docs-font-size-xs);height:24px;padding:2px 4px}.preview__source{border-bottom:none;border-radius:0!important;border-top:1px solid var(--docs-color-layout-gray-200);display:none;position:relative}.preview--expanded .preview__source{display:block}.preview__source pre{background-color:var(--docs-color-background-surface-1);border:none;border-radius:0 0 var(--gstock-border-radius-md) var(--gstock-border-radius-md)!important;box-shadow:none;color:var(--docs-color-on-background-surface-1);margin:0!important;overflow:auto;padding:1rem 1.5rem;position:static}.preview__source pre:before{content:none}.content__body>div>pre,.content__body>pre{border:var(--docs-border-width-thin) solid var(--docs-color-border-surface-1);border-left:3px solid var(--docs-color-foreground-primary);border-radius:var(--gstock-border-radius-md)!important;font-size:var(--docs-font-size-sm);line-height:var(--docs-line-height-lg);margin:0 0 var(--docs-spacing-lg)!important}.preview__controls{align-items:end;background-color:var(--gstock-color-surface);border-top:var(--gstock-border-width) solid var(--gstock-color-border);display:flex;flex-wrap:wrap;gap:var(--gstock-space-200);padding-block:var(--gstock-space-200);padding-inline:var(--gstock-space-300);position:relative}.preview__controls--block-start{border-bottom:var(--gstock-border-width) solid var(--gstock-color-border);border-radius:var(--gstock-border-radius-md) var(--gstock-border-radius-md) 0 0;border-top:none;order:-1}.preview:not(.preview--no-styles):has(.preview__controls--block-start) .preview__canvas{border-radius:0}.preview--has-inline-controls{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto}.preview--has-inline-controls .preview__canvas{border-radius:0 var(--gstock-border-radius-md) 0 0;grid-column:2;grid-row:1}.preview--has-inline-controls .preview__controls{border-radius:var(--gstock-border-radius-md) 0 0 0;border-right:var(--gstock-border-width) solid var(--gstock-color-border);border-top:none;grid-column:1;grid-row:1}.preview--has-inline-controls .preview__toolbar{grid-column:1/-1;grid-row:2}.preview--has-inline-controls .preview__source{grid-column:1/-1;grid-row:3}.preview--has-inline-end-controls{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.preview--has-inline-end-controls .preview__canvas{border-radius:var(--gstock-border-radius-md) 0 0 0;grid-column:1;grid-row:1}.preview--has-inline-end-controls .preview__controls{border-left:var(--gstock-border-width) solid var(--gstock-color-border);border-radius:0 var(--gstock-border-radius-md) 0 0;border-top:none;grid-column:2;grid-row:1;padding-block-start:var(--gstock-space-500)}.preview--has-inline-end-controls .preview__toolbar{grid-column:1/-1;grid-row:2}.preview--has-inline-end-controls .preview__source{grid-column:1/-1;grid-row:3}@container (max-width: 600px){.preview--has-inline-controls,.preview--has-inline-end-controls{display:block}.preview--has-inline-controls .preview__controls{border-bottom:var(--gstock-border-width) solid var(--gstock-color-border);border-radius:var(--gstock-border-radius-md) var(--gstock-border-radius-md) 0 0;border-right:none;order:-1}.preview--has-inline-controls .preview__canvas{border-radius:0}.preview--has-inline-end-controls .preview__controls{border-left:none;border-radius:0;border-top:var(--gstock-border-width) solid var(--gstock-color-border)}.preview--has-inline-end-controls .preview__canvas{border-radius:var(--gstock-border-radius-md) var(--gstock-border-radius-md) 0 0}}.preview__controls--column{align-items:stretch;flex-direction:column}.preview__controls-group{align-items:end;display:flex;flex-wrap:wrap;gap:var(--gstock-space-200)}.preview__controls-reset{position:absolute;right:var(--gstock-space-100);top:var(--gstock-space-100)}.preview__toolbar{background-color:var(--gstock-color-surface-sunken);border-top:var(--gstock-border-width) solid var(--gstock-color-border);display:flex;height:2rem;justify-content:flex-end;padding-block:2px;padding-inline:28px 12px;position:relative}.preview__tabs{display:inline-flex;flex:1}.preview__tabs--hidden{display:none}.preview__button{background-color:transparent;border:none;border-radius:0;color:var(--docs-color-layout-gray-600);cursor:pointer;flex:0 0 auto;font:inherit;font-size:.7rem;font-weight:500;min-width:2.5rem;padding:0 .5rem;text-transform:uppercase}.preview__button:not(:last-of-type){border-right:1px solid var(--docs-color-layout-gray-200)}.preview__button--html,.preview__button--react{display:flex;justify-content:center;place-items:center;width:70px}.preview__button--selected{color:var(--docs-color-primary);font-weight:700}.preview__button:active,.preview__button:hover{border-right-color:transparent;box-shadow:0 0 0 1px var(--docs-color-primary);color:var(--docs-color-primary)}.preview__button:focus-visible{outline:var(--docs-focus-ring-width) var(--docs-focus-ring-style) var(--docs-focus-ring-color)}.preview__toggle{color:var(--docs-color-layout-gray-600);cursor:pointer}.preview__canvas .output{margin-top:var(--docs-spacing-md)}.preview__canvas .output ul{margin:0}.preview__canvas .output__key{font-weight:700}.preview__canvas .preview__canvas--box{border:2px solid var(--docs-color-layout-gray-500);height:300px;margin-bottom:1rem;padding:1rem;position:relative}.flavor-html [data-flavor]:not([data-flavor=html]),.flavor-react [data-flavor]:not([data-flavor=react]){display:none}.copy-code-button,.preview__resizer .component-page__navigation,.preview__resizer .copy-code-button,.preview__resizer .preview__resizer,.preview__resizer .preview__toolbar,.preview__toolbar .component-page__navigation,.preview__toolbar .copy-code-button,.preview__toolbar .preview__resizer,.preview__toolbar .preview__toolbar{display:none!important}.component-page__navigation .component-page__navigation,.component-page__navigation .copy-code-button,.component-page__navigation .preview__resizer,.component-page__navigation .preview__toolbar,.preview:not(.preview--expanded) .preview__toolbar{border-radius:0 0 var(--gstock-border-radius-md) var(--gstock-border-radius-md)}.flavor-html .preview__source--html>pre,.flavor-react .preview__source--react>pre{border:none}.preview__source-group{border-bottom:1px solid var(--docs-color-layout-gray-200);border-bottom-left-radius:var(--docs-border-radius-md);border-bottom-right-radius:var(--docs-border-radius-md)}