.drawer-mask{left:0;width:100%;background:rgba(0,0,0,.5);z-index:999}.drawer,.drawer-mask{position:fixed;top:0;height:100%}.drawer{left:-300px;width:300px;color:var(--basic-font-color);background:#fff;box-shadow:2px 0 5px rgba(0,0,0,.5);transition:left .3s;z-index:1000}.drawer.open{left:0}.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f5f5f5;color:var(--basic-font-color);border-bottom:1px solid #ddd}.drawer-title{font-size:1.25rem}.drawer-close{background:none;border:none;font-size:1.5rem;cursor:pointer}.drawer-body{padding:1rem}@media (max-width:768px){.drawer{left:-80%;width:80%}}.menu{padding:1rem}.menu ul{list-style:none;padding:0;margin:0}.menu-item{margin-bottom:1rem}.menu-link{display:flex;align-items:center;text-decoration:none;color:var(--basic-font-color)}.menu-icon{margin-right:.5rem;font-size:1.5rem}.spinner{border:8px solid rgba(0,0,0,.1);border-top:8px solid var(--primary-color);border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}