.demo-copy-code-button,.demo_button,.demo_code .demo,.demo_preview,.demo_resize,.demo_toggle{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--code-block-border-radius:0;--code-block-margin:0}.demo-copy-code-button{background:#616161;border:0;border-radius:4px;bottom:4px;color:#fff;cursor:pointer;opacity:0;padding:8px;position:absolute;right:4px;text-transform:uppercase;-webkit-transition:opacity .35s;transition:opacity .35s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}pre:hover .demo-copy-code-button{opacity:1}.demo-copy-code-button.copied{--pulse-color:rgb(var(--sl-color-neutral-600));-webkit-animation:pulse .5s;animation:pulse .5s}@-webkit-keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 #757575;box-shadow:0 0 0 0 #757575}70%{-webkit-box-shadow:0 0 0 4px transparent;box-shadow:0 0 0 4px transparent}to{-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}}@keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 #757575;box-shadow:0 0 0 0 #757575}70%{-webkit-box-shadow:0 0 0 4px transparent;box-shadow:0 0 0 4px transparent}to{-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}}code{font-size:14px;padding:16px}.markdown-section pre{padding:0 1.5rem}.markdown-section pre>code{margin:0;padding:2.2em 0}.demo_code pre{border-left:1px solid #e0e0e0;border-right:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;max-width:100%}.demo_preview_content,pre{overflow:scroll}.demo{background:#fafafa;border-top-right-radius:3px;-webkit-box-sizing:border-box;box-sizing:border-box;margin-bottom:1.5rem;min-width:20rem;overflow:visible;position:relative}.demo_preview{background:#fff;border-left:1px solid #e0e0e0;border-top:1px solid #e0e0e0;border-top-left-radius:3px;border-top-right-radius:3px;max-width:100%;min-height:5rem;min-width:20rem;padding:1.5rem 3.25rem 1.5rem 1.5rem;position:relative}.demo_preview,.demo_resize{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.demo_resize{-webkit-box-pack:center;-ms-flex-pack:center;border:1px solid #e0e0e0;border-top-right-radius:3px;bottom:0;color:#e4e4e7;color:#757575;cursor:ew-resize;font-size:10px;justify-content:center;margin-bottom:-1px;margin-top:-1px;position:absolute;right:0;top:0;-webkit-transition:background-color .25s;transition:background-color .25s;width:1.75rem}.demo_button{background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.demo_button svg{height:9px}.demo_toggle{-webkit-box-flex:1;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;-webkit-appearance:none;border:1px solid #e0e0e0;border-bottom-left-radius:3px;border-bottom-right-radius:3px;color:#757575;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;height:2.5rem;justify-content:center;position:relative;-webkit-transition:background-color .25s;transition:background-color .25s}.demo_resize:active,.demo_toggle:hover{background:#e1f5fe;border-color:#4fc3f7;color:#039be5;z-index:2}.demo_resize:active,.demo_toggle:active{-webkit-box-shadow:0 0 0 1px #b3e5fc,0 0 0 1px #b3e5fc;box-shadow:0 0 0 1px #b3e5fc,0 0 0 1px #b3e5fc}@media screen and (max-width:600px){.demo_preview{border-right:1px solid #e0e0e0;border-top-right-radius:3px;padding-right:1.5rem}.demo_resize{display:none}}