.example .example-body>div[class^=_border]{height:100px;width:100px;border-width:1px;border-style:solid;border-color:transparent}.example .example-body>div[class=_border],.example .example-body>div[class^=_border-]{border-color:var(--color--gray-40)}.example .example-body>div[class=_border-top]{border-color:var(--color--gray-10);border-top-color:var(--color--gray-50)}.-dark .example .example-body>div[class=_border-top],.example .-dark .example-body>div[class=_border-top]{border-color:var(--color--gray-80);border-top-color:var(--color--gray-50)}.example .example-body>div[class=_border-right]{border-color:var(--color--gray-10);border-right-color:var(--color--gray-50)}.-dark .example .example-body>div[class=_border-right],.example .-dark .example-body>div[class=_border-right]{border-color:var(--color--gray-80);border-right-color:var(--color--gray-50)}.example .example-body>div[class=_border-bottom]{border-color:var(--color--gray-10);border-bottom-color:var(--color--gray-50)}.-dark .example .example-body>div[class=_border-bottom],.example .-dark .example-body>div[class=_border-bottom]{border-color:var(--color--gray-80);border-bottom-color:var(--color--gray-50)}.example .example-body>div[class=_border-left]{border-color:var(--color--gray-10);border-left-color:var(--color--gray-50)}.-dark .example .example-body>div[class=_border-left],.example .-dark .example-body>div[class=_border-left]{border-color:var(--color--gray-80);border-left-color:var(--color--gray-50)}.example .example-body>div[class^=_background],.example .example-body>div[class^=_color]{height:80px;width:228px;display:inline-flex;justify-content:center;align-items:center;border-radius:var(--border-radius)}.example .example-body>div[class*="_display:flex"],.example .example-body>div[class*="_display:flex"] div{padding:calc(var(--spacing) * 1 / 2);background:var(--color--gray-10);border:1px solid var(--color--gray-30)}.-dark .example .example-body>div[class*="_display:flex"],.example .-dark .example-body>div[class*="_display:flex"],.-dark .example .example-body>div[class*="_display:flex"] div,.example .-dark .example-body>div[class*="_display:flex"] div{background:var(--color--gray-80);border-color:var(--color--gray-90)}.example .example-body>div[class*=_align-content],.example .example-body>div[class*=_flex-direction-column],.example .example-body>div[class*=_align-items]{min-height:180px}.example .example-body>div[class*="_display:flex"]>div[class^=_align-self]+div{height:180px}.example .example-body>div[class*=_margin]{padding:calc(var(--spacing) * 1 / 2);background:var(--color--gray-10);border:1px solid var(--color--gray-30);min-height:25px;display:flex}.example .example-body>div[class*=_max-height],.example .example-body>div[class*=_max-width],.example .example-body>div[class*=_height],.example .example-body>div[class*=_width]{padding:calc(var(--spacing) * 1 / 2);background:var(--color--gray-10);border:1px solid var(--color--gray-30)}.example .example-body>div[class*=_max-width],.example .example-body>div[class*=_width]{display:flex}.example .example-body>div[class*=_max-height],.example .example-body>div[class*=_height]{display:inline-flex}.example .example-body>._height\:25\%{height:50px!important}.example .example-body>._height\:50\%{height:100px!important}.example .example-body>._height\:75\%{height:150px!important}.example .example-body>._max-height\:100\%,.example .example-body>._height\:100\%{height:200px!important}.example .example-body>._width\:100\%{width:auto!important}.example .example-body>._max-width\:100\%{flex:1 1 100%;flex-direction:row}.example .example-body>.layout{border:1px solid var(--color--gray-40);padding:var(--spacing);border-radius:var(--border-radius)}.-dark .example .example-body>.layout,.example .-dark .example-body>.layout{border-color:var(--color--gray-60)}.example .example-body>.layout .layout,.example .example-body>.layout .layout-content,.example .example-body>.layout .layout-header,.example .example-body>.layout .layout-footer,.example .example-body>.layout .layout-aside{padding:var(--spacing);border-radius:var(--border-radius);text-align:center;border:1px solid var(--color--gray-40)}.-dark .example .example-body>.layout .layout,.example .-dark .example-body>.layout .layout,.-dark .example .example-body>.layout .layout-content,.example .-dark .example-body>.layout .layout-content,.-dark .example .example-body>.layout .layout-header,.example .-dark .example-body>.layout .layout-header,.-dark .example .example-body>.layout .layout-footer,.example .-dark .example-body>.layout .layout-footer,.-dark .example .example-body>.layout .layout-aside,.example .-dark .example-body>.layout .layout-aside{border-color:var(--color--gray-60)}.example .example-body>.layout .layout-header{margin-bottom:calc(var(--spacing) * 1 / 2)}.example .example-body>.layout .layout-footer{margin-top:calc(var(--spacing) * 1 / 2)}.example .example-body>.layout .layout-aside{width:30%;flex-basis:30%}.example .example-body>.layout .layout-aside+.layout{margin-left:var(--spacing)}.example .example-body>.layout .layout+.layout-aside{margin-left:var(--spacing)}.example .example-body>.layout .layout-content,.example .example-body>.layout .layout-aside{min-height:300px}.example .example-body>.layout .layout-content,.example .example-body>.layout .layout-aside-children{display:flex;justify-content:center;align-items:center}.example .example-body>.container{max-width:100%;background:var(--color--gray-05);border:1px solid var(--color--gray-10);border-radius:var(--border-radius);padding-top:var(--spacing);padding-bottom:var(--spacing)}.-dark .example .example-body>.container,.example .-dark .example-body>.container{background:var(--color--gray-85);border-color:var(--color--gray-80)}.example .example-body>.container .row{background:var(--color--gray-10);border:1px solid var(--color--gray-20);border-radius:var(--border-radius);padding-top:var(--spacing);padding-bottom:var(--spacing)}.example .example-body>.container .row.-top,.example .example-body>.container .row.-middle,.example .example-body>.container .row.-bottom{height:150px}.-dark .example .example-body>.container .row,.example .-dark .example-body>.container .row{background:var(--color--gray-80);border-color:var(--color--gray-70)}.example .example-body>.container .row+.row{margin-top:var(--spacing)}.example .example-body>.container .row .column{background:var(--color--gray-20);border:1px solid var(--color--gray-40);border-radius:var(--border-radius);padding-top:var(--spacing);padding-bottom:var(--spacing)}.-dark .example .example-body>.container .row .column,.example .-dark .example-body>.container .row .column{background:var(--color--gray-70);border-color:var(--color--gray-50)}.example .example-body>.container .row .column .row{background:var(--color--gray-25);border:1px solid var(--color--gray-50)}.-dark .example .example-body>.container .row .column .row,.example .-dark .example-body>.container .row .column .row{background:var(--color--gray-65)}.example .example-body>.container .row .column .column{background:var(--color--gray-30);border:1px solid var(--color--gray-60)}.-dark .example .example-body>.container .row .column .column,.example .-dark .example-body>.container .row .column .column{background:var(--color--gray-60);border-color:var(--color--gray-40)}.example .example-body>.card{max-width:360px}.example>.card-body{padding:calc(var(--spacing) * 1 / 2)}.example .example-body{display:block;width:100%;box-sizing:border-box}.example .example-body>*{margin:calc(var(--spacing) * 1 / 2)}.example .example-body>.header{width:auto}.example .example-body>.navbar{z-index:1}.example .example-body .layout+.layout{margin-top:var(--spacing)}.example .example-body>.container{max-width:calc(100% - var(--spacing))}.example .example-body>picture{margin:0}.example .example-body img,.example .example-body picture>img{margin:calc(var(--spacing) * 1 / 2);max-width:calc(100% - var(--spacing))}.example .example-tabs .tabs-header{justify-content:flex-end}.example .example-tabs .tabs-header .tab-title{min-width:100px}.example .example-tabs .tab .tab-body>pre>code{white-space:pre;word-wrap:normal}.example .example-tabs .clipboard{position:absolute;top:calc(var(--spacing) * 2 + 56px);right:calc(var(--spacing) * 2);width:32px;height:32px;padding:0}.example .example-tabs .clipboard.-light{----background: var(--color--white)}.example .example-tabs .clipboard.-dark{----background: var(--color--dark)}.example+.example{margin-top:var(--spacing)}.example.-no-margin{padding:var(--spacing)}.example.-no-margin>.body>*{margin:0}.example.-dark>.card-body{----body--background: var(--color--dark-65)}.example.-dark>.card-footer{----footer--background: var(--color--dark-70)}.example.-dark .example-tabs{----header--background: var(--color--dark-65);----header--background--active: var(--color--dark-65);----header--background--hover: var(--color--dark-60);----background: var(--color--dark-65)}