@import url("https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap");*{font-family:Mochiy Pop One,sans-serif}:root{--color-bg:#b3b3b1;--color-border:#6f6b6b;--color-sidebar-item:#979797}*{padding:0;margin:0;box-sizing:border-box}body{background-color:#eee;font-family:Roboto,sans-serif}.layout{display:flex;height:100vh;position:relative;gap:2rem}.layout__main-content{flex-grow:1}.sidebar__wrapper{position:relative}.sidebar{width:17rem;height:100%;background-color:var(--color-bg);padding:1rem;transition:all .4s cubic-bezier(.175,.885,.32,1.1);overflow:hidden}.sidebar__top{width:max-content;display:flex;align-items:center;gap:1rem;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--color-border)}.sidebar__logo{width:3.5rem;height:3.5rem;object-fit:contain;border-radius:1rem}.sidebar__logo-name{font-size:1.2rem;font-weight:600}.sidebar__list{list-style:none}.sidebar__link{display:inline-block;font-size:1.5rem;text-decoration:none;color:#000;padding:.8rem 1rem;display:flex;background-color:var(--color-sidebar-item);margin-bottom:1rem;border-radius:.8rem}.sidebar__link--active{color:#0e0e0e;background-color:#e1e1db}.sidebar__icon{display:inline-block;font-size:1.4rem}.sidebar__name{margin-left:.5rem}[data-collapse=true]{width:5.3rem}[data-collapse=true] .sidebar__logo-name,[data-collapse=true] .sidebar__name{display:none}.btn{position:absolute;right:0;top:4.7rem;border:none;color:#e1e1db;background-color:#000;width:1.5rem;height:1.5rem;border:1px solid var(--color-border);border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transform:translateX(50%);font-size:4.1rem}