/*!
 * react-kui v3.1.1
 * Copyright 2017-present, kui-react.
 * All rights reserved.
 * Homepage: https://react.k-ui.cn
 * Author: Qiu / https://chuchur.com
 */

.k-demo{border:1px solid var(--kui-color-border);border-radius:13px;margin:10px 0;transition:all .3s;position:relative}.k-demo .k-content,.k-demo .k-desc{box-sizing:border-box;padding:20px}.k-demo .k-code{box-sizing:border-box;white-space:pre;tab-size:2;caret-color:var(--kui-color-text);outline:none;padding:12px 20px 20px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:14px;line-height:1.7}.k-demo .k-desc{border-top:1px solid var(--kui-color-border);margin:30px 0 0;position:relative}.k-demo .k-desc h4{padding:5px 10px 5px 0;font-size:15px;font-weight:600;line-height:1;position:absolute;top:-55px}.k-demo .k-desc .k-desc-content{padding-right:50px;position:relative}.k-demo .k-desc .k-desc-content p{margin:0;padding:0}.k-demo .k-code-actions{align-items:center;font-size:20px;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.k-demo .k-code-actions .k-btn{background-color:var(--kui-color-bg)}.k-demo .k-code-box{outline:none;flex-direction:column;transition:all .3s;position:relative}.k-demo .k-code-box .k-code-pre{height:100%;min-height:100%;font-size:0;line-height:2;transition:height .3s ease-in-out;overflow:hidden}.k-demo .k-code-box code,.k-demo .k-code-box kbd,.k-demo .k-code-box samp{font-size:14px;line-height:2}.k-demo .k-code-box .hljs{box-sizing:border-box;margin:0;font-size:14px}.k-demo .k-code-box pre{border-top:1px dashed var(--kui-color-border);margin:0}.k-demo .k-code-tools{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-top:1px solid var(--kui-color-border);border-bottom:1px solid var(--kui-color-border);justify-content:center;align-items:center;gap:8px;padding:5px 20px 5px 10px;display:flex}.k-demo-expanded .k-code-actions{display:none}.k-demo-horizontal{display:flex}.k-demo-horizontal .k-demo-view{flex-shrink:0;width:40%}.k-demo-horizontal .k-code-tools{border-top-color:#0000}.k-demo-horizontal pre{border-radius:0 0 12px 12px}.k-demo-horizontal .k-content{height:425px;min-height:425px;overflow:auto}.k-demo-horizontal .k-code-box{border-top-right-radius:12px;border-bottom-right-radius:12px;flex-shrink:0;width:60%;height:425px;display:flex;overflow:hidden}.k-demo-horizontal .k-code-box .k-code{border-radius:0 0 12px;flex:1;display:block;overflow:auto}.k-demo-horizontal .k-code-box .k-code pre{box-sizing:border-box;background-color:#0000;border:none;border-radius:0 0 12px;flex:1}.k-demo-container{margin-bottom:60px}.k-desc-content p code{background-color:var(--kui-color-bg-container);color:var(--kui-color-primary);border-radius:4px;padding:.15em .5em}.k-demo-view [class^=k-demo-view-]{all:initial;font-family:inherit;display:block}.k-demo-vertical .k-code{border-radius:0 0 13px 13px;max-height:80px;transition:max-height .3s;position:relative;overflow:hidden}.k-demo-vertical .k-code:before{content:"";background-image:linear-gradient(to bottom, transparent, var(--kui-color-bg));width:100%;height:100%;position:absolute;top:0;left:0}.k-demo-vertical .k-content{overflow:auto}.k-demo-vertical .k-code-tools{box-sizing:border-box;flex-wrap:wrap;max-width:100%}.k-demo-expanded .k-code{max-height:580px;overflow-y:auto}.k-demo-expanded .k-code:before{display:none}.k-demo-container{min-width:0;max-width:100%}.k-demo,.k-demo .k-demo-view,.k-demo .k-code-box{min-width:0}pre code.hljs{padding:1em;display:block;overflow-x:auto}code.hljs{padding:3px 5px}.hljs{background-color:var(--kui-color-bg-component);height:100%}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#73a500}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#3489cb}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}.hljs-tag{color:#535252}img{max-width:100%}