@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.battery{--battery-color:#fff;--battery-width:200px;--battery-height:350px;--battery-border-width:10px;--battery-border-radius:10px;align-items:center;display:flex;flex-direction:column;justify-content:center;padding:10px}.battery__top{background-color:var(--battery-color);border-top-left-radius:var(--battery-border-radius);border-top-right-radius:var(--battery-border-radius);height:25px;width:80px}.battery__container{border:var(--battery-border-width) solid var(--battery-color);border-radius:var(--battery-border-radius);height:var(--battery-height);overflow:hidden;position:relative;width:var(--battery-width)}.battery__container__level{background-color:var(--battery-color);bottom:0;height:0;left:0;position:absolute;width:100%}.battery__container__level .waves{height:20px;left:0;position:absolute;top:-15px;width:100%}.battery__container__level .waves .wave--1{animation:wave 3s linear infinite;animation-delay:0s;opacity:1}.battery__container__level .waves .wave--2{animation:wave 3.5s cubic-bezier(.36,.45,.63,.53) infinite;animation-delay:-1s;opacity:.6}@media(min-width:768px){.battery{--battery-width:300px;--battery-height:600px}}@keyframes wave{0%{transform:translateX(0)}to{transform:translateX(100%)}}