.bg-react{background-color:#61dafb}.bg-vue{background-color:#4fc08d}*{outline:0}:focus{outline:0}button:focus{outline:0}section{border:2px solid #bdc3c7;margin:10px 0;padding:1.6rem 1rem 1rem;border-radius:8px;position:relative}section[data-name]{padding:2.4rem 1rem 1rem}section[data-name]::before{font-family:Roboto,sans-serif;z-index:1;content:attr(data-name);pointer-events:none;border-radius:.25rem;padding:.2rem .75rem;position:absolute;top:0;left:0;color:#fff;background-color:#34495e;font-size:16px}section.style-1::before{background-color:#3498db}section.style-2::before{background-color:#8e44ad}section section::before{background-color:#27ae60;font-size:14px}section section::before section::before{background-color:#9b59b6}.logo{width:100px;height:100px}.group{border:2px solid #888;padding:5px}.example-container .btn+.btn{margin-left:5px}.example-container .example{border:4px solid #333222;padding:10px}.btn.btn-link{background-color:transparent!important;text-decoration:underline;color:#000!important}.react-app .box--demo{width:50px;height:50px}.react-app .box,.react-app .btn{background:#61dafb;color:#000}.react-app .switch{--color:#61dafb}.vue-app .box,.vue-app .btn{background:#4fc08d;color:#fff}.vue-app .switch{--color:#4fc08d}.space-y-2>*+*{margin-top:.25rem}.navigation{width:0;height:100%;position:fixed;z-index:999}.navigation .example-btn.is-active{background-color:#138496}.navigation.is-open .nav__drawer-cover{opacity:1;visibility:visible}.navigation.is-open .nav__drawer-content{transform:translateX(0);box-shadow:rgba(0,0,0,.75) 0 0 30px 10px}.navigation.is-open .nav__toggle-btn:before{transform:rotate(0)}.navigation .nav__drawer-content,.navigation .nav__drawer-cover{position:absolute;top:0;left:0;width:100%;height:100%}.navigation .nav__drawer-cover{background:rgba(0,0,0,.5);opacity:0;z-index:1;visibility:hidden;width:100vw;transition:opacity .3s ease 0s,visibility .3s ease}.navigation .nav__drawer-content{width:300px;background-color:#fff;padding:40px 20px;z-index:2;position:relative;transition:transform .3s ease 0s;transform:translateX(-100%)}.navigation .nav__toggle-btn{border:0;position:absolute;right:-60px;top:40px;width:40px;height:40px;cursor:pointer;border-radius:4px;background-color:#eee;border:2px solid #000}.navigation .nav__toggle-btn:hover{background-color:#ccc}.navigation .nav__toggle-btn:before{content:"";transform:rotate(180deg);transition:all .3s ease .35s;width:100%;height:100%;display:inline-block;background-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIHdpZHRoPSI0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHBhdGggZD0ibTI2IDIwLTYgNm02LTYtNi02bTYgNmgtMTIiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4KICA8L2c+Cjwvc3ZnPg==);background-position:center center;background-repeat:no-repeat}.switch{position:relative;display:inline-block;width:60px;height:34px;--color:black}.switch input{position:absolute;width:100%;height:100%;left:0;top:0;cursor:pointer;opacity:0}.switch span{pointer-events:none;position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:34px}.switch span:before{border-radius:50%;position:absolute;content:"";width:26px;height:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}.switch input:checked+span{background-color:var(--color)}.switch input:checked+span:before{transform:translateX(26px)}.switch input:focus+span{box-shadow:0 0 1px var(--color)}