Notification Panel

<div class="container">  <button class="icon">    <i class="fas fa-wifi"></i>  </button></div>

:root {  --icon-bg: #212121;  --icon-fg: gray;}* {  margin: 0;  padding: 0;}.container {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 10px;}.icon {  all: unset; /* removing all the pre defined style */  font-size: 1.4rem;  width: 40px;  height: 40px;  padding: 0.5rem;  border-radius: 999px;  display: grid; /* making icon center horizontally and vertically */  place-items: center;  background: var(--icon-bg);  color: var(--icon-fg);  border: 2px solid transparent;  transition: background 200ms ease-in-out;  cursor: pointer;  -webkit-tap-highlight-color: transparent; /* Removing Blue Highlight box */}/* To Prevent Hover on smaller Devices */@media screen and (min-width: 500px) {  .icon:hover {    border: 2px solid white;    box-shadow: 0 0 20px -5px white;  }}/* Change the bg and fg */.active-icon {  --icon-bg: white;  --icon-fg: black;}

const icons = document.querySelectorAll(".icon");// Adding an event listener to the icons to change the active statusicons.forEach((icon) =>  icon.addEventListener("click", () => {    icon.classList.toggle("active-icon");  }));